JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer">
    <div id="round">
        <div class="inround"></div>
        <div class="triangle-left"></div>
    </div>
</div>

CSS

#outer {
        position: relative;
    }
    #round {
        width:200px;
        height:200px;
        overflow: hidden;
        -webkit-border-radius: 200px;
        -moz-border-radius: 200px;
        -khtml-border-radius:200px;
        -opera-border-radius:200px;
        border-radius: 200px;
    }
    .inround {
        position:absolute;
        margin:10px;
        width:180px;
        height:180px;
        overflow: hidden;
        -webkit-border-radius: 200px;
        -moz-border-radius: 200px;
        -khtml-border-radius:200px;
        -opera-border-radius:200px;
        background: white;
        border-radius: 200px;
    }
    .triangle-left {
        margin-top:-100px;
        margin-left:100px;
        width: 0;
        height: 0;
        border-top: 200px solid red;
        border-right: 200px solid transparent;
        border-bottom: 200px solid transparent;
    }