conic-gradient で pie-chart をつくってみよう

2019年10月5日

pure css で
円グラフを作成できることをご存知ですか！
conic-gradient を使って実現してみましょう。

conic-gradient() は CSS の関数で、中心から広がるのではなく、
中心点の周りを回りながら色が変化する
放射グラデーションから成る画像を生成します。
なぜ “conical" (円錐の) グラデーションと呼ばれるのか。
色経由点が一方よりもう一方が明るい場合、
上から見た円錐のように見えるからです。

conic-gradient() – CSS: Cascading Style Sheets | MDN

それでは
結果を見てみましょう。

こんな感じの円グラフが、
簡単に作れます。
以下が HTML と CSS になります。

<div class="container">
  <div class="pie-chart">
  </div>
</div>

.pie-chart {
  width: 340px;
  height: 340px;
  background: conic-gradient(#8b22ff 0% 25%, #ffc33b 25% 56%, #21f3d6 56% 100%);
  border-radius: 50%;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

conic-gradientの Browser サポート は、
Chrome と Safari、Android系と
少ないですが
CSS conic-gradient() polyfill を使えば、
サポートしていない Browserでも
CSS 円錐形グラデーションを作れます。

ポリフィルとは、最近の機能をサポートしていない古いブラウザーで、
その機能を使えるようにするためのコードです。大抵はウェブ上の JavaScript です。

Polyfill (ポリフィル)

CSS conic-gradient() polyfill

CSS conic-gradient() polyfill CSS conic-gradient() polyfill Conic gradients are awesome, but bro ...

 https://leaverou.github.io/conic-gradient/