[css]円グラフ作成方法

簡単

作例

HTMLは何でもいい。

<div class="graph"></div>

こうする。

.graph{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-image: conic-gradient(blue 0deg 240deg, red 240deg 300deg, gray 300deg 360deg);
}

こうなる。

制作メモ

0時からスタートで時計回りに指定する。

開始は0deg、最大が360degの縛りがあるので、0時を含む形を作りたければ0時部分で分割する。

上記の通り終了位置と次の色の開始位置を同値にせず、隙間を開けた場合はその部分がグラデーションになる。

色の変わり目はアンチエイリアスが効いてないので、斜めのところはあんまりキレイじゃない。

そんな感じで。