Oval cutout shape element

Question

I would like to achieve a shape like this picture:

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

I need the shape of the black part on the picture, the cut out hast to be transaprent, so you can see background. the middle part doesnt have to be responsive, can be fixed with 100px, is there a way with some inverted border radius? Any help would be appretiated.

Use an SVG - then place it on top – David Dec 16 '19 at 08:00 — David, Dec 16 '19 at 08:00

score 0 · Answer 1 · answered Dec 16 '19 at 08:35

You can try this code

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

Oval cutout shape element

1 Answers1