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

结果：

Answer 2

如果您希望三角形具有响应性，但设置的宽度不是屏幕的100％，则可以使用calc。

.bg{
  background: #000;
  width: 100%;
  height: 100vh;
  margin: 0;
}
.bg:after{
  content: '';
  width: 0;
  display: block;
  border-style: solid;
  border-width: calc(100vh - 50px) calc(100vw - 50px) 0 0;
  border-color: #fedbda transparent transparent transparent;
  position: absolute;
  top: 8px;
  margin: 25px;
}

<div class="bg">

</div>