Question

我正在尝试从下图复制样式：

这就是我所在的地方：

＆＃13;

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

＆＃13;

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

＆＃13;

我尝试使用::before和::after，结果甚至不相似。

Answer 1

没有所有这些标记和更少代码的线性渐变解决方案怎么样：

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>

Answer 2

使用rgba值替换background-color属性（此处为“alpha”的'a'是关键字）可能会提供所需的结果。设置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

CSS歪斜有2个叠加

2 个答案: