css

Question

想要的结果：

A 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%，您可以使用计算器。

.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>

css - 三角形边框占屏幕的 100%

css - triangle borders 100% of screen

html

border