JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div class='circle'><span class='sector'></span></div>

CSS

body{
    background:#ccc;
}
.sector{
    display:inline-block;
    position:relative;
    width:0;
    border:20px solid transparent;
    border-radius:100%;
    border-left:20px solid #f0f;
    z-index:100;
}
.sector:after{
    content:' ';
    display:block;
    position:absolute;
    width:0;
    border:20px solid transparent;
    border-radius:100%;
    border-left:20px solid #f0f;
    top:-20px;
    left:-20px;
    transform:rotateZ(45deg);
}
.circle{
    width:40px;
    height:40px;
    border:0 solid transparent;
    border-radius:100%;
    background:#fff;
    
}