我正在尝试复制下图的样式:
这就是我所在的地方:
.asymmetric {
position: relative;
background-color: #7CCBF2;
}
.asymmetric::before {
position: absolute;
content: "";
width: 100%;
height: 115%;
top: -30px;
left: 0;
background-color: red;
transform: skewY(-3deg);
z-index: -10;
}
.asymmetric::after {
position: absolute;
content: "";
width: 100%;
height: 115%;
top: -10px;
left: 0;
background-color: yellow;
transform: skewY(3deg);
z-index: -10;
}
body {
margin: 0 auto;
background-color: #EEEEEE;
font-family: sans-serif;
}
section {
padding: 50px 0;
}
.blank-space {
height: 100px;
}
h2 {
margin: 0;
padding-bottom: 70px;
text-align: center;
text-transform: uppercase;
letter-spacing: 15px;
}
p {
width: 70%;
margin: 0 auto;
line-height: 2;
font-size: 18px;
}<body>
<section class="blank-space"></section>
<section class="asymmetric">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet, magna tellus, ultricies etphasellus tincidunt elit nec. Ornare sollicitudin sapien non, dignissim metus wisi pharetra sollicitudin, sem integer. Nibh sem et amet, ultrices ac interdum, nec enim lorem elit commodo dolor, aliquam ipsum eget ornare nullam, iaculis porttitor. Quisque sint, lobortis rutrum est nonummy, potenti quam quam molestie pede porta. Sem ante dis dui wisi suscipit, eu vitae odio integer, congue velit lectus aliquet luctus bibendum, et facilisis, laoreet ad</p>
</section>
<section class="blank-space"></section>
</body>我尝试过使用 ::before 和 ::after，结果甚至都不相似。
最佳答案
没有所有这些标记和更少代码的线性渐变解决方案怎么样:
section {
padding:50px;
background-image:
/*top layer*/
linear-gradient(to top right,transparent 50%,rgba(0,255,0,0.5) 51%),
linear-gradient(to bottom left,transparent 50%,rgba(0,255,0,0.5) 51%),
linear-gradient(rgba(0,255,0,0.5),rgba(0,255,0,0.5)),
/*Bottom layer*/
linear-gradient(to top left,transparent 50%,red 51%),
linear-gradient(to bottom right,transparent 50%,red 51%),
linear-gradient(red,red);
background-position:bottom,top,center;
background-size:100% 40px,100% 40px, 100% calc(100% - 80px);
background-repeat:no-repeat;
}<section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rhoncus est nibh, quis vulputate mi vehicula quis. Donec luctus, turpis molestie pretium ornare, ipsum tellus consequat nibh, vitae consectetur odio mauris sit amet orci. Suspendisse libero metus, mattis vel malesuada vel, ornare eget orci. Sed rhoncus metus mauris, et egestas arcu imperdiet at. Aenean orci orci, fringilla vel porttitor id, suscipit eget nunc. Quisque ac sem ultrices, dignissim massa eu, auctor diam. Etiam tempus tempus velit a scelerisque. Nam dolor lacus, venenatis a leo quis, ornare aliquet urna. Curabitur convallis maximus tempus. Donec ac enim quis ante tincidunt dapibus. Suspendisse et risus arcu.
</section>如果你想让它不对称地调整一些值:
section {
padding:50px;
background-image:
/*top layer*/
linear-gradient(to top right,transparent 50%,rgba(0,255,0,0.5) 51%),
linear-gradient(to bottom left,transparent 50%,rgba(0,255,0,0.5) 51%),
linear-gradient(rgba(0,255,0,0.5),rgba(0,255,0,0.5)),
/*Bottom layer*/
linear-gradient(to top left,transparent 50%,red 51%),
linear-gradient(to bottom right,transparent 50%,red 51%),
linear-gradient(red,red);
background-position:bottom,top,center;
/*Updated this*/
background-size:100% 30px,100% 30px, 100% calc(100% - 60px),
100% 50px,100% 50px, 100% calc(100% - 100px);
background-repeat:no-repeat;
}<section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rhoncus est nibh, quis vulputate mi vehicula quis. Donec luctus, turpis molestie pretium ornare, ipsum tellus consequat nibh, vitae consectetur odio mauris sit amet orci. Suspendisse libero metus, mattis vel malesuada vel, ornare eget orci. Sed rhoncus metus mauris, et egestas arcu imperdiet at. Aenean orci orci, fringilla vel porttitor id, suscipit eget nunc. Quisque ac sem ultrices, dignissim massa eu, auctor diam. Etiam tempus tempus velit a scelerisque. Nam dolor lacus, venenatis a leo quis, ornare aliquet urna. Curabitur convallis maximus tempus. Donec ac enim quis ante tincidunt dapibus. Suspendisse et risus arcu.
</section>关于具有 2 个叠加层的 CSS Skew，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49742265/