CSS: pie chart

By Xah Lee. Date: .

Example. Pie chart

<div class="xpiechart"></div>
.xpiechart {
 display: inline-block;
 margin: 0.5rem;
 padding: 0.5rem;
 width: 200px;
 height: 200px;
 border-radius: 50%;
 color: black;
 text-shadow: 0px 0px 3px white;
 background-image: conic-gradient(red 0turn 0.2turn, yellow 0.2turn 0.76turn, green 0.76turn 0.94turn, blue 0.94turn 1turn);
}

CSS gradients