最佳答案
我使用了 2 个带有 box-shadow
的 div 我添加了 border
以便理解
body {
background:url(https://placeimg.com/640/480/any);
}
.out {
width: 455px;
height: 275px;
border: 1px solid red;
position: relative;
overflow: hidden;
margin: 20px;
}
.in {
width: 550px;
height: 550px;
border: 1px solid green;
position: absolute;
left: 200px;
border-radius: 50%;
box-shadow: 0 0 0 500px white; /* this is the white background */
}
.bottom .in {
bottom: 0;
left: 200px;
}
<div class="out">
<div class="in">
</div>
</div>
<div class="out bottom">
<div class="in">
</div>
</div>
关于css - 如何创建css凹/凸形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37921356/