conic-gradientを使った円グラフパターン

グラデーション関連のCSS関数に、conic-gradient()がある。この関数は放射状のグラデーションを作ることができ、応用することで円グラフがCSSだけで簡単に作れる。

conic-gradient()の基礎

/* 自動的にグラデーションする */
.rainbow {
  background: conic-gradient(
    red, orange, yellow, green, blue, indigo, violet
  );
}

/* 色の範囲を角度で指定する */
.deg {
  background: conic-gradient(
    red 45deg,
    orange 45deg 90deg,
    yellow 90deg 135deg,
    green 135deg 180deg,
    blue 180deg 225deg,
    indigo 225deg 270deg,
    violet 270deg 315deg,
    purple 315deg 360deg
  );
}

conic-gradient()を使った円グラフ

.pie {
  --percent: 83%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    yellowgreen 0 var(--percent),
    ghostwhite var(--percent) 100%
  );
}

background-clipを使ったドーナツグラフ

background-clip: border-areaを使うことで、ドーナツグラフ（中抜き円グラフ）を作れる。

.donut {
  --percent: 83%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    yellowgreen 0 var(--percent),
    ghostwhite var(--percent) 100%
  );

  /* border-areaで切り抜く */
  background-clip: border-area;
  background-origin: border-box;
  border: 10px solid transparent;
}

複数の色を使ったドーナツグラフ

.donut-multi {
  border-radius: 50%;
  background-image: conic-gradient(
    yellowgreen 0 20%,
    yellow 20% 40%,
    orange 40% 60%,
    red 60% 80%,
    purple 80% 100%
  );

  /* border-areaで切り抜く */
  background-clip: border-area;
  background-origin: border-box;
  border: 10px solid transparent;
}