JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<div style="position:relative">
<div class="pie" style="--p:70"> 60%</div>

<div class="pie1" style="--p:70" > 60%</div>
</div>

CSS

.pie {
    --p: 20;
    --b: 22px;
    --c: red;
    --w: 150px;
    width: var(--w);
    aspect-ratio: 1;
    position: relative;
    display: inline-grid;
    margin: 5px;
    place-content: center;
    font-size: 25px;
    font-weight: bold;
    font-family: sans-serif;
}
div {
    display: block;
}
.pie:before {
    inset: 0;
    background: radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat, conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
    mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
.pie:before, .pie:after {
    content: "";
    position: absolute;
    border-radius: 50%;
}
.pie:after {
    inset: calc(50% - var(--b)/2);
    background: var(--c);
    transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}
.pie:before, .pie:after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.pie1 {
    position:absolute;
    --p: 20;
    --b: 10px;
    --c: green;
    --w: 100px;
    width: var(--w);
    aspect-ratio: 1;
    top:25px; left:25px;
    display: inline-grid;
    margin: 5px;
    place-content: center;
    font-size: 15px;
    font-weight: bold;
    font-family: sans-serif;
}
div {
    display: block;
}
.pie1:before {
    inset: 0;
    background: radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat, conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
    mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
.pie1:before, .pie1:after {
    content: "";
    position: absolute;
    border-radius: 50%;
}
.pie1:after {
    inset: calc(50% - var(--b)/2);
    background: var(--c);
    transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(50% -...