I am struggling to create the exact contour as shown in the image. Despite trying, I have not been successful in achieving it. I used a lot of HTML child tags in my attempt, but I would prefer to keep it minimal. Is there a simpler way to accomplish this?
*{margin: 0; padding: 0; box-sizing: border-box;}
.parent, .child {
display: flex;
border: 1px solid gray;
}
.parent {
width: 50%;
height: 100vh;
justify-content: center;
align-items: center;
}
.child {
padding: 15px;
border-radius: 50px;
}
.one {width: 20vw; height: 15vh;}<div class="parent">
<div class="child">
<div class="child">
<div class="child">
<div class="child">
<div class="child">
<div class="child">
<div class="child">
<div class="child">
<div class="child">
<div class="child">
<div class="child one">img</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>