【CSS】扇型グラディエーション conic-gradient repeating-conic-gradient で円グラフや集中線を描写

CSS gradient
gradientには3種類あり、linear-gradientと radial-gradientに関しては以下を参照してください。


conic-gradient
conic-gradientではまたちょっと違ったデザインが可能です。
いろいろ値を変えて違いを確かめてみてください。
Red : 50%
Green : 50%
Blue : 50%
Yellow : 50%
円グラフ
conic-gradient()のカッコの中に、
(色 % ,色 % ~ %
,色 % ・・・ )
最初の0%と最後の100%は書く必要がありません。
.circle{
width: 200px;
height: 200px;
border-radius: 50%;
background: conic-gradient(red 25%, green 25% 50%, blue 50% );
}
degでも同じく描写できますが、1周が360degなので、 マックス100%のグラフを作るには計算しないといけません。
.circle{
background: conic-gradient(red 90deg, green 90deg 180deg, blue 180deg );
}
repeating-conic-gradientで集中線を描く
.repeatConic{
width: 100%;
height: 300px;
background: repeating-conic-gradient(#000 0, #333 3%, #555 3%, #999 4%);
}

conic-gradient : 扇型のグラディエーションを描写。
repeating-conic-gradient : 集中線を描写できる。