椭圆形切口形状元素

Question

我想获得如下图所示的形状：

.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固定，是否有一些倒边界半径的方法？任何帮助将不胜感激。

Answer 1

您可以尝试使用此代码

.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>