如何生成CSS3形状

Question

我在photoshop图层中有一个形状，我正在附加该形状的图像。请您写下如何从CSS3生成它。

Answer 1

您可以使用css：after效果

<div class="shape"></div>

.shape {
width: 100px; height: 100px;
line-height: 100px;
background-color: #fc0;
display: inline-block;
margin-left: 50px;
position: relative;
z-index: 2;
text-decoration: none;}

.shape:after {
content: "";
width: 100px; height: 100px;
background-color: #fff;
position: absolute;
top: 0; right: -50px;
border-radius: 50%;
z-index: 3;}

Answer 2

.img-shape {宽度：367px;高度：623px；背景颜色：#bababa;显示：块;左边距：50px;职位：相对z-index：2;} .img-shape：之后{content：“”;宽度：562px；高度：840px；背景颜色：#FFFFFF;位置：绝对；顶部：-108px；右：-470px；边界半径：50％； z-index：3；}

Answer 3

您可以创建背景图层容器，并将叠加形状容器放置在同一父对象中。请检查以下代码。希望对您有帮助。

.container{width:300px;
height:500px;
background:#ccc;
position:relative}

.circle{width:300px;
height:540px; background:#fff;
position:absolute;
left:52%;
top:-10px;
border-radius:100%
}

<div class="container">
<div class="circle"></div>
</div>