有人可以告诉我如何让顶部倾斜的 div 覆盖整个屏幕顶部吗?

Question

我想让顶部倾斜的div覆盖整个屏幕顶部，包括左上角的空白区域。有人可以告诉我一种方法可以做到这一点吗？

查看此链接以了解我想要的样子： https://imgur.com/a/JDaVuWf

谢谢！

body {
margin: 0;
padding: 0;
color: #fff;
}
.skew {
transform: skew(0deg, -10deg);
background-color: gray;
padding: 200px 0;
margin-top: -100px;
margin-bottom: 200px;
width: 100%;
}
.content {
text-align: center;
transform: skew(0deg, 10deg);
}
.skew2 {
transform: skew(0deg, -10deg);
background-color: blue;
padding: 200px 0;
margin-top: -100px;
margin-bottom: 200px;
}
.content2 {
color: black;
text-align: center;
transform: skew(0deg, 10deg);
}

<section id="sec1">
<div class="skew">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
</div>
</section>
<section id="sec2">
<div class="skew2">
<div class="content2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
</div>
</section>

Answer 1

您可以在第一部分使用 ：：before

。

#sec1:before {
content: '';
position: absolute;
width: 100%;
height: 100px; //or what you need
top: 0;
left: 0;
background: grey;
transform: none;
z-index: 1;
}

Answer 2

使用渐变，您可以轻松地使形状覆盖整个空间，并且还可以响应：

body {
margin: 0;
padding: 0;
}
.skew {
padding:100px 0;
color: #fff;
text-align:center;
background:
linear-gradient(red,red) top/100% calc(100% - 100px) no-repeat,
linear-gradient(to top left,transparent 49%,red 50.5%) bottom/100% 100px no-repeat;
}
.skew2 {
margin-top:-50px;
padding:120px 0;
text-align:center;
background:
linear-gradient(to top left,transparent 49%,blue 50.5%) bottom/100% 100px no-repeat,
linear-gradient(blue,blue) center/100% calc(100% - 200px) no-repeat,
linear-gradient(to bottom right,transparent 49%,blue 50.5%) top/100% 100px no-repeat;
}

<section id="sec1">
<div class="skew">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
</div>
</section>
<section id="sec2">
<div class="skew2">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
</div>
</section>