BFE.devでのAI解答例 - CSS 質問
15. doughnut chart

.piechart { width: 100px; height: 100px; border-radius: 50%; position: relative; background: conic-gradient(#f44336 var(--percentage, 0%), transparent 0%); /* calculate the thickness / background-size: calc(50% - 5px) calc(50% - 5px); / adjust the angle to start from 12 o'clock / background-origin: border-box; background-position: 50% 25%; / add the hole */ z-index: 1; &::before { content: ''; position: absolute; top: 10px; left: 10px; width: 80px; height: 80px; background: #fff; border-radius: 50%; z-index: 2; } }