JSFiddle - React, Tailwind, and code Playground

by Kheema Pandey

HTML

<div></div>

CSS

div, div:before {

  height: 0px;
  width: 140px;
  position: relative;
  border-bottom: 200px solid red;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom-left-radius: 150px 70px;
  border-bottom-right-radius: 100px 25px;
position:relative;
}
div:before {
  content:'';
  poition:absolute;
  display:block;
  z-index:-1;
  top:0;
  left:-30px;
  width: 140px;
  transform-origin:center;
  transform:scale(1.01);/* adapt here the width of your fake border */
  border-bottom: 200px solid black; /* color of fake border */
  
}