cssで円グラフを作成

cssで円グラフを簡単に作成することが出来る。
扇形グラデーションを作成できるconic-gradientを使用する。

<style>
.circle-graph {
    background-image: conic-gradient(red 0% 10%, blue 10% 50%, green 50% 100%); // グラフの色
    width: 200px;
    height: 200px;
    border-radius: 50%; // 形を円にする
}
</style>

<div class="circle-graph"></div>

radial-gradientで円の真ん中をくり抜くことも出来る。

<style>
.circle-graph {
    background-image: radial-gradient(#fff 0% 50%, transparent 50% 100%), conic-gradient(red 0% 10%, blue 10% 50%, green 50% 100%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
}
</style>

<div class="circle-graph"></div>