html - css - 三 Angular 形边框 100% 的屏幕

Question

期望的结果:

一种 CSS 解决方案，其中我有一个容器，其宽度为 :100%;，在容器的上方和下方，我附加了三 Angular 形以创建一个平行四边形。三 Angular 形应覆盖整个屏幕宽度。

问题

我尝试使用 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，它是视口(viewport)宽度的 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;
}

结果: