<div class="pie-chart" style="
--size: 2em;
--color3: indianred;
--value1: 20%;
--value2: 10%;
--value3: 30%;
--value4: 25%;
--value5: 5%;
--background: hsl(220 10% 70%);
"></div>
.pie-chart {
width: 10em;
height: 10em;
padding: calc(var(--size, 15em) / 2);
border-radius: 50%;
background: conic-gradient(
hsl(0 80% 50%) 0 20%,
hsl(25 80% 50%) 0 30%,
hsl(50 80% 50%) 0 60%,
gray 0);
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.