🍩

【CSS】円グラフをつくる conic-gradient

2022/05/31に公開約1,200字

まずは完成形

肝は conic-gradient

「conic」は円錐という意味で、0°~360°までをグルっと回るようにグラデーションします。
ちなみに、「○○-gradient」はimageに分類されますので、background-imageは使えません。

色の開始と終了位置を調整しながら作成していきます。
radial-gradientと組み合わせることによって、中心に円を置いたりと表現の幅も広がります!
試しに数字をいじって、どこが動いているか確認してみてください。

ギザギザを緩和するテクニック

普通に制作すると、断面がギザギザになってしまいます。
以下の例では、0~35%、35%~100%の2段階で色の設定をしています。

.pie-chart4 {
    background-image: radial-gradient(#fff 0% 35%, transparent 35%),
    conic-gradient(#003681 0%, #0f9d87 35%, #d9d9d9 35% 100%);
}


緩和するには、ひとつめの色の終了地点とふたつめの開始地点を数%ずらします。
0.1~2%くらいで大丈夫です。
すると、境目に少しぼかしが加わり、滑らかに見えます。

.pie-chart3 {
    background-image: radial-gradient(#fff 0% 35%, transparent 36%),
    conic-gradient(#003681 0%, #0f9d87 35%, #d9d9d9 35.2% 100%);
}

さいごに

初心者さんにとっては、一見難しそうですが、仕組みはシンプルなので簡単に実装できますよ!

Twitterで質問受け付けておりますので、分からないことがあればDMください!

https://twitter.com/yurippe_dev

参考

https://developer.mozilla.org/ja/docs/Web/CSS/gradient/conic-gradient

Discussion

ログインするとコメントできます