conic-gradient で pie-chart をつくってみよう
この記事は約 3 分で読めます。
pure css で
円グラフを作成できることをご存知ですか! conic-gradient
を使って実現してみましょう。
conic-gradient() – CSS: Cascading Style Sheets | MDN
conic-gradient()
は CSS の関数で、中心から広がるのではなく、
中心点の周りを回りながら色が変化する
放射グラデーションから成る画像を生成します。
なぜ “conical" (円錐の) グラデーションと呼ばれるのか。
色経由点が一方よりもう一方が明るい場合、
上から見た円錐のように見えるからです。
それでは
結果を見てみましょう。
とんかつの1切れ目は
どこから食べればおいしいのか、
ある料理人は
とんかつを上から見たときに幅の広い「肉側」の2~3番目が火入れの状態が一番ちょうどいい
といいます。
あなたは1切れ目、どこを選びますか?
とんかつの1切れ目、どこから食べる?
– Yahoo!ニュース 意識調査
こんな感じの円グラフが、
簡単に作れます。
以下が 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 円錐形グラデーションを作れます。
ポリフィルとは、最近の機能をサポートしていない古いブラウザーで、
Polyfill (ポリフィル)
その機能を使えるようにするためのコードです。大抵はウェブ上の JavaScript です。
conic-gradients
をよりよく理解するには、
MDNドキュメントを参照してください。
最後まで
ご高覧いただきまして
有難うございました
ディスカッション
コメント一覧
まだ、コメントがありません