くまだどうも、くまだです。
CSSのconic-gradient()関数についてのあれこれ。
conic-gradient()関数
conic-gradient()関数は0°～360°に向かってグラデーションすることができます。conicは円錐状という意味です。
CSSのグラデーションといえば、linear-gradient()関数があります。ちなみにlinear-gradient()関数は直線状のグラデーションを表現できます。
他に似たようなものでradial-gradient()関数があります。こちらの場合は放射状グラデーションです。
conic-gradient()関数は以下のように記述します。
.box {
background: #fff;
width: 120px;
height: 120px;
border-radius: 50%;
position: relative;
background: conic-gradient(from 0deg, #1e72f8, #3d9bc7, #81ee9b, #6bec01);
}
from 0degのところで角度を調整できます。
また、以下のように円グラフみたいな表示にもできます。
.box {
background: #fff;
width: 120px;
height: 120px;
border-radius: 50%;
position: relative;
background: conic-gradient(
#1e72f8 0%,
#1e72f8 10%,
#3d9bc7 10%,
#3d9bc7 45%,
#81ee9b 45%,
#81ee9b 60%,
#6bec01 60%,
#6bec01 100%
);
}
#1e72f8の領域を0%から10%、#3d9bc7の領域を10%～45%…のように表示させたい色の領域をどこからどこまで、という感じで指定します。
maskと組み合わせてドーナツ型グラフにもできます。
.box {
background: #fff;
width: 120px;
height: 120px;
border-radius: 50%;
position: relative;
background: conic-gradient(
#1e72f8 0%,
#1e72f8 10%,
#3d9bc7 10%,
#3d9bc7 45%,
#81ee9b 45%,
#81ee9b 60%,
#6bec01 60%,
#6bec01 100%
);
mask: radial-gradient(circle, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 41%)
}
ここまで読んでくださりありがとうございました。