CSS扭曲效果与2个叠层的覆盖

Question

CSS扭曲效果与2个叠层的覆盖

3

我正试图复制下面图片的样式：

目前我的进展如下：

.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，但结果甚至不相似。

- Zeljko Marinkovic

2个回答

2

将你的 background-color 属性替换为 rgba 值（这里的 'a' 代表 'alpha'）可能会提供所需的结果。设置 alpha 值可以确定颜色的不透明度并允许一定程度的透明度。

我在这里标出了更改：

.asymmetric {
  background-color: rgba(124, 203, 242, 0.25);
}

.asymmetric::before {
  background-color: rgba(255, 0, 0, 0.25);
}

.asymmetric::after {
  background-color: rgba(255, 255, 0, 0.25);
}

jsfiddle example

- Frish

将来请在您的帖子中包含所有相关代码，而不仅仅是链接到代码托管站点。您的帖子应该独立于任何其他资源；考虑一下如果该站点在未来关闭会发生什么！ - Neuron

@LonelyNeuron 收到 :) - Zeljko Marinkovic

谢谢你的回答，Frish。但我的更大问题是顶部和底部的横截面在同一条线上，而在图片上不是这样的 :) - Zeljko Marinkovic

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

不需要过多的标记和代码，使用线性渐变解决方案如何：

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>