JSFiddle - React, Tailwind, and code Playground

HTML

<div id="quarter"></div>

<div id="advanced"></div>

CSS

div {
    margin: 15px;
}
#quarter {
    height: 100px;
    width: 100px;
    
    -webkit-border-radius: 100%  0 0 0;
    -moz-border-radius: 100%  0 0 0; 
    border-radius: 100%  0 0 0; /*top-left top-right bottom-left bottom-right*/
    
    background-color: red;
}
#advanced {
    /*triangle*/
    width:0;
    height:0;
    border: 100px solid transparent;
    border-top-color: black; /* for top quarter */

    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    
    margin-bottom: -100px; /*compensate invisible border*/
}