はじめに
タイトルの通り今回はCSSだけで角丸の円グラフを作成しました。
前提
- SVGは使わずCSSのみで作成
- グラフの色はグラデーションにも対応
背景
シンプルな円グラフであれば既に記事にしてくださっている方もいらっしゃいましたが、円グラフが角丸で色がグラデーションとなると記事が全く見つからなかったためメモ代わりに残そうと思いました。
本題
完成品
下記が完成品です。
流れ
-
グラデーションの円を作成
とりあえずグラデーションの円を作成します。
-
円の上に灰色の扇形を置く
ここでのポイントはconic-gradientです。
ここでは説明を割愛しますがこれで灰色と透明のグラデーションを作成して扇形が作れます。
-
更に上に白い円を置く
最初の円よりも小さい円を上に置きます。
-
最後に角丸を付ける
ここが一番苦労したポイントです。
1で作成したグラデーションの円と全く同じものを作って、表示するサイズや位置を調整してoverflow:hiddenで余分な部分は見えなくしています。
実際のコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step</title>
</head>
<body>
<div class="step_back">
<div class="rotate_box">
<div class="item2">
<div class="color_box"></div>
</div>
</div>
<div class="item"></div>
<div class="step">
</div>
</div>
<style>
:root{
/* 円全体の大きさ */
--circle-size: 300px;
/* 白い円の大きさ */
--inner-circle-size: 210px;
/* グラフの色 */
--graph-color: linear-gradient(90deg, rgba(89, 173, 241, 1), rgba(207, 253, 157, 1));
/* 進捗度(下記の例だと80%) */
--progress: 80%;
--progress-deg:80deg;
--circle-radius: calc(var(--circle-size) / 2);
--graph-width: calc((var(--circle-size) - var(--inner-circle-size)) / 2)
}
.rotate_box{
position: absolute;
z-index: 99999;
top: 0;
left: 0;
width: var(--circle-size);
height: var(--circle-size);
transform: rotate(calc(3.6 * var(--progress-deg)));
}
.color_box{
position: relative;
width: var(--circle-size);
height: var(--circle-size);
top: 0;
left: calc((var(--circle-radius) - var(--graph-width) / 2)* -1);
background-image: var(--graph-color);
transform: rotate(calc(3.6 * var(--progress-deg) * -1));
}
.item2{
position: absolute;
left: calc(var(--circle-radius) - var(--graph-width) / 2);
z-index: 999;
overflow: hidden;
width: var(--graph-width);
height: var(--graph-width);
border-radius: 9999px;
}
.step_back{
position: relative;
z-index: 0;
display: flex;
justify-content: center;
align-items: center;
width: var(--circle-size);
height: var(--circle-size);
background-image: var(--graph-color);
border-radius: 9999px;
overflow: hidden;
}
.step_back::after{
content: "";
position: absolute;
z-index: 10;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 9999px;
width: var(--circle-size);
height: var(--circle-size);
background-image: conic-gradient(transparent 0% var(--progress), #d9d9d9 var(--progress) 100%);
}
.item{
position: absolute;
z-index: 20;
top: 0;
left: calc(var(--circle-radius) - var(--graph-width) / 2);
width: var(--graph-width);
height: var(--graph-width);
background-image: var(--graph-color);
background-size: var(--circle-size) var(--circle-size);
background-repeat: no-repeat;
background-position: calc((var(--circle-radius) - var(--graph-width) / 2) * -1) 0;
border-radius: 9999px;
}
.step{
position: relative;
z-index: 100;
display: flex;
justify-content: center;
align-items: center;
width: var(--inner-circle-size);
height: var(--inner-circle-size);
border-radius: 9999px;
background-color: #fff;
}
</style>
</body>
</html>
さいごに
シンプルな見た目に反して少し難しかったですが、普段とは違う頭の使い方をしたので結構楽しかったです。
実際はSVGを用意すれば簡単にできますが、今後よく使いそうなのでコンポーネントとして作成したくて考えました。
せっかく作ったので多くの人に役立ててもらえたらうれしいです。
今後も少しずつブログを更新しようと思っているのでよろしくお願いします。