JSFiddle - React, Tailwind, and code Playground

HTML

<div id="concave">
    
</div>

<svg>
  <defs>
    <mask id="masking">
      <rect width="300" height="300" fill="white"/>
      <ellipse rx="150" ry="10" cx="150" cy="300" fill="black" />
    </mask>
  </defs>
</svg>

CSS

#concave {
    
    height: 300px;
    width: 300px;
    background: rgb(200,50,200);
   
    mask: url('#masking');
}