CSS：静的な高さのスクリーンサイズの幅に三角形を描くことは可能ですか

Question

私は応答する三角形に苦しんでいます - 画面の幅に合う三角形を作成する必要がありますが、画面の幅小さくなる。

Answer 1

を試みる：

#triangle { 
 
    overflow: auto; 
 
} 
 

 
#triangle span { 
 
    width:50%; 
 
    height: 40px; 
 
    float: left; 
 
} 
 

 
#triangle span:first-child { 
 
    background: linear-gradient(to top left, orange 50%, transparent 50%); 
 
} 
 

 
#triangle span:nth-child(2) { 
 
    background: linear-gradient(to top right, orange 50%, transparent 50%); 
 
}

<div id="triangle"> 
 
    <span></span><span></span> 
 
</div>

三角形を初期幅に保つには、次のjsを追加します。

var triangle = document.getElementById('triangle'); 
var width = triangle.offsetWidth; 
triangle.style.setProperty('width', width+"px"); 

See the JSFiddleデモ用。

Answer 2

Iは、2つの三角形（50％の幅を有する各々）を追加し、線形勾配を用いて溶液を考え出すこの

background-size: 100% 150px;