JSFiddle - React, Tailwind, and code Playground

by bakhshi

HTML

<div class="pie">
    <div class="overlay"></div>
</div>

CSS

.pie {
    width: 100px;
    height:100px;
    position:relative;
}
.pie::after, .pie::before {
    content:'';
    display:block;
    position:absolute;
    width:100%;
    height:50%;
    top:0;
    left:0;
    background-color:red;
    border-radius:50% 50% 0 0/100% 100% 0 0;
    
    -webkit-transform-origin: bottom center;
    -moz-transform-origin: bottom center;
    -ms-transform-origin: bottom center;
    -o-transform-origin: bottom center;
    transform-origin: bottom center;
}
div::after {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    transform: rotate(20deg);
}
.overlay {
    position:absolute;
    border-radius:50%;
    left:5px;
    right:5px;
    top:5px;
    bottom:5px;
    background-color:white;
    z-index:2;
}