JSFiddle - React, Tailwind, and code Playground
HTML
<div id="pie"></div>
CSS
#pie {
position: relative;
width: 100px;
height: 100px;
background-color: #76dd76;
border-radius: 50%;
border: 1px solid #76dd76;
}
#pie:before, #pie:after {
position: absolute;
content:"";
display: block;
width: 50%;
height: 50%;
-webkit-transform-origin: right bottom;
-moz-transform-origin: right bottom;
-ms-transform-origin: right bottom;
transform-origin: right bottom;
background-color: white;
border-top-left-radius: 100%;
}
#pie:after {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}