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

CSS gradient

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

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

conic-gradient

円グラフ

  .circle{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(red 25%, green 25% 50%, blue 50% );
  }  

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