CSSのみで円グラフを作ります
HTML+CSSで円グラフを描く
円グラフの例
40%、30%、20%、10%の割合です。
コードの説明
HTML
<div class="chart"></div>
CSS
.chart {
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(#ff0000 0% 40%, #00ff00 40% 70%, #0000ff 70% 90%, #ffff00 90% 100%);
}
仕組みの説明
200pxのdivを描き、border-radiusを50%として円の形にします。
backgroundをconic-gradientで指定します。
上から右に向かってbackgroundを指定します。
#ff0000 0% 40% | #00ff00 40% 70% | #0000ff 70% 90% | #ffff00 90% 100% |
---|---|---|---|
40% | 30% | 20% | 10% |
もし、60%、30%、10%としたい場合は、
background: conic-gradient(#ff0000 0% 60%, #00ff00 60% 90%, #0000ff 90% 100%);
とします。
カラージェネレータ
RGB部分をクリックし、HEXを選択するとCSS用のカラーコードが表示されます。
円グラフ作成時の色設定にご利用ください。