问题描述
我想使用 CSS 归档这种形状。
#wave {
position: absolute;
height: 50%;
width: inherit;
background: #e0efe3;
}
<div id="wave"></div>
解决方法
您可以使用 border-radius
、relative positioning
少许 CSS gradient
和一些 z-index
来实现它。
HTML
<div class="topdiv">Top Content</div>
<div class="overlapdiv"></div>
<div class="bottomdiv">Bottom Content</div>
CSS
div {
width: 500px;
min-height: 200px;
position: relative;
}
.topdiv {
background-color: #911bc9;
border-radius: 0 0 0 100px;
z-index: 2;
}
.overlapdiv {
top: -100px;
background: linear-gradient(90deg,rgba(168,57,224,1) 0%,1) 50%,rgba(145,27,201,1) 100%);
}
.bottomdiv {
background-color: #a839e0;
z-index: 1;
border-radius: 0 100px 0 0;
top: -200px;
}