CSS響應三角形寬度

Question

簡單的問題真的，我想知道如何使三角形的寬度（在下面的代碼與css製作）等於頁面寬度，所以當瀏覽器調整大小，三角形也如此。

我的代碼，到目前爲止

.triangle { 
    color: crimson; 
    width: 0; 
    height: 0; 
    margin-top: 30%; 
    border-top: 100px solid crimson; 
    border-left: 100px solid transparent; 
    border-right: 100px solid transparent; 
} 

Answer 1

.triangle { 
    color: crimson; 
    width: 0; 
    height: 0; 
    margin-top: 30%; 
    border-top: 100px solid crimson; 
    border-left: 50vw solid transparent; /* check border size here! */ 
    border-right: 50vw solid transparent; /* and here! */ 
} 

Sample fiddle。

Read more on CSS3 vh/vw units。

Browser support is not an issue。