JSFiddle - React, Tailwind, and code Playground

by hiral

HTML

<pie class="ten"></pie>
<pie class="twentyfive"></pie>
<pie class="fifty"></pie>
<pie class="seventyfive"></pie>
<pie class="onehundred"></pie>

CSS

pie {
    width: 50px;
    height: 50px;
    display: block;
    border-radius: 50%;
    background-color: lime;
    float: left;
    margin: 5px;
    position:relative;
}
pie:after {
    content:"";
    position:absolute;
    height:46px;
    width:46px;
    background:white;
    margin:2px;
    border-radius: 50%;
}
.ten {
    background-image: linear-gradient(126deg, transparent 50%, #ccc 50%), linear-gradient(90deg, #ccc 50%, transparent 50%);
}
.twentyfive {
    background-image: linear-gradient(180deg, transparent 50%, #ccc 50%), linear-gradient(90deg, #ccc 50%, transparent 50%);
}
.fifty {
    background-image: linear-gradient(90deg, #ccc 50%, transparent 50%);
}
/* Slices greater than 50% require first gradient
   to be transparent -> green */
 .seventyfive {
    background-image: linear-gradient(180deg, transparent 50%, lime 50%), linear-gradient(90deg, #ccc 50%, transparent 50%);
}
.onehundred {
    background-image: none;
}