🍩
【CSS】円グラフをつくる conic-gradient
まずは完成形
肝は 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ください！
参考
Discussion