<分区>
html - 椭圆形切口形状元素
我想实现这样的形状:
.left{float:left; width:40%; background:#000; height:60px; border-top-right-radius:50%;}
.center{float:left; width:30%; background:#000; height:30px;}
.right{float:left; width:40%; background:#000; height:60px; border-top-left-radius:50%;}<div class="left"></div>
<div class="center"></div>
<div class="right"></div>我需要图片上黑色部分的形状，剪下来的部分必须是透明的，这样你才能看到背景。中间部分不必是响应式的，可以用 100px 固定，有没有一些反转的边框半径的方法？如有任何帮助，我们将不胜感激。
最佳答案
你可以试试这段代码
.oval{
background: #000;
height: 60px;
width: 300px;
margin: 0px auto;
margin-top: 100px;
position: relative;
}
.left{
width: 110px;
background: #000;
height: 70px;
border-top-right-radius: 100px;
position: absolute;
left: 0;
top: -33px;
}
.center{
width: 114px;
background: #ffffff;
height: 100px;
position: absolute;
top: -75px;
left: 50%;
transform: translateX(-50%);
border-radius: 53px;
z-index: 99;
}
.right{
width: 110px;
background: #000;
height: 70px;
border-top-left-radius: 100px;
position: absolute;
right: 0;
top: -33px;
}<div class="oval">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>关于html - 椭圆形切口形状元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59352403/