▲TOPへ戻る

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

array

CSS gradient

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

CSS
【CSS】background: linear-gradientで背景をグラディエーションさせる方法
CSS
【CSS】background: radial-gradientで背景をグラディエーションさせる方法

conic-gradient

conic-gradientではまたちょっと違ったデザインが可能です。

いろいろ値を変えて違いを確かめてみてください。


Red : 50%
Green : 50%
Blue : 50%
Yellow : 50%
background:conic-gradient ( red 50%, green 50%, blue 50%, yellow50%)

円グラフ

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%);
  }
point

conic-gradient : 扇型のグラディエーションを描写。

repeating-conic-gradient : 集中線を描写できる。

こんな記事も読まれています。

profile

gaoさん

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。<