如何生成 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:after { content: ""; 宽度：562px； 高度：840px； 背景色：#FFFFFF； 位置：绝对； 顶部：-108px； 右：-470px； 边界半径：50%； z-索引：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>