JSFiddle - React, Tailwind, and code Playground

by iammaddison143

HTML

<div class="bg"></div>

CSS

.bg {
  background:#eee;
  width:200px;
  height:200px;
  border-radius:50%;
  position:relative;
}
.bg:after {
  content:'';
  position:absolute;
  bottom:0;
  width:100%;
  height:50%;
  box-sizing:border-box;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  border-width:0 5px 5px 5px;
  border-style: solid;
  border-color:#f00;
}