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; 
} 

结果：