10%
20%
30%
10%
    

HTML

<div class="Pie Positive" style="--segment: 10;"> <div class="Overlay">10%</div> </div>

CSS

.Overlay{ margin: auto; text-align: center; font-size: 2em; font-weight: bold; text-shadow: 1px 1px rgba(250,250,250,.5); } .Pie{ display: flex; align-content: center; align-items: center; width: 10.75em; height: 10.75em; border-radius: 50%; background-origin: border-box; border: .15em solid #fff; box-shadow: 0 0.075em 0.2em 0.05em rgba(0,0,0,.5); margin: .75em; } .Positive{ background-image: conic-gradient( #0c0 calc(3.6deg * var(--segment, 100)), #070 0 ); }