CSSで円グラフを描く

ひとりアドベントカレンダー２日目はCSSです。 CSSで円グラフを描きます。 とりあえず結果はコレです。

See the Pen LGPLvX by なおしむ (@naosim) on CodePen.

描き方

基本的には「50%のグラフ＋半円」で作ります。

０〜１８０度

左半分に青い半円を重ねて回転させます。 イメージはこんな感じ。

CSSで書くとこんな感じ。

.pie {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: yellowgreen;
  background-image: linear-gradient(to right, transparent 50%, #655 0);
}

.pie::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
}

.deg45::before {
  transform: rotate(45deg);
}

.pieで半分緑、半分グレーの円を描いてます。 そのbeforeで回転させる緑の半円を描いてます。

あとは別途.deg45でbeforeを回転させて完成。 ０〜１８０度まではこれの角度を変えた.deg90とか作ればOK

１８０〜３６０度

考え方は１８０度までと同じです。 違いは、半円の部分の色がグレーなだけ。 CSSはこんな感じ(違う部分だけ)

.deg225::before {
  background-color: #655;
  transform: rotate(45deg);
}

225度ですが、先ほどの45度の色がグレーバージョンです。

ソースコード

CSS

.pie {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: yellowgreen;
  background-image: linear-gradient(to right, transparent 50%, #655 0);
}

.pie::before {
  content: '';
  display: block;
  margin-left: 50%;
  height: 100%;
  border-radius: 0 100% 100% 0 / 50%;
  background-color: inherit;
  transform-origin: left;
}

.deg0::before {
  transform: rotate(0deg);
}

.deg45::before {
  transform: rotate(45deg);
}

.deg90::before {
  transform: rotate(90deg);
}

.deg135::before {
  transform: rotate(135deg);
}

.deg180::before {
  transform: rotate(180deg);
}

.deg225::before {
  background-color: #655;
  transform: rotate(45deg);
}

.deg270::before {
  background-color: #655;
  transform: rotate(90deg);
}

.deg315::before {
  background-color: #655;
  transform: rotate(135deg);
}

.deg360::before {
  background-color: #655;
  transform: rotate(180deg);
}

/* 横並び用 */
.pie {
  float: left;
}
.pielist:after {
  clear: both;
}

HTML

<div class="pielist">
  <div class="pie deg0"></div>
  <div class="pie deg45"></div>
  <div class="pie deg90"></div>
  <div class="pie deg135"></div>
  <div class="pie deg180"></div>
  <div class="pie deg225"></div>
  <div class="pie deg270"></div>
  <div class="pie deg315"></div>
  <div class="pie deg360"></div>
</div>

以上。ではまた明日ーー。