CSS - 三角邊界屏幕的100％

Question

期望的結果：

一個CSS解決方案，其中我有一個容器width: 100%;，以及上方和容器下方，我有創建一個平行四邊形連接的三角形。三角形應該覆蓋整個屏幕的寬度。

問題

我試圖與transform，但也變換容器內的文本，這樣就不會工作，以創建所需的表格。現在我正在嘗試2個div，1個以上和1個容器，以及border-right css屬性。這裏的問題是它不接受百分比。

代碼

HTML：

<div class="triangleUP"></div> 
<article class="blue"> 
    Lorem ipsum (times 200) 
</article> 
<div class="triangleDOWN"></div> 

CSS：

.triangleUP { 
    width: 0; 
    height: 0; 
    border-top: 250px solid transparent; 
    border-right: 1920px solid #344cd0; 
    overflow:hidden; 
} 
.blue{ 
    background-color:#344cd0; 
    color:white; 
} 
.triangleDOWN{ 
    width: 0; 
    height: 0; 
    border-top: 250px solid #344cd0; 
    border-right: 1920px solid transparent; 
} 

JSFiddle

我知道用jQuery我可以很容易操縱的財產，但我寧願只保留CSS。

Answer 1

這裏可能的解決方案是使用100vw，它是視口寬度的100％。這裏是一個table of current browser support.

新建CSS：

.triangleUP { 
width: 0; 
height: 0; 
border-top: 250px solid transparent; 
border-right: 100vw solid #344cd0; 
overflow:hidden; 
} 
.blue{ 
    background-color:#344cd0; 
    color:white; 
} 
.triangleDOWN{ 
    width: 0; 
    height: 0; 
    border-top: 250px solid #344cd0; 
    border-right: 100vw solid transparent; 
} 

結果：