CSS の conic-gradient() を使った扇形にグラデーションするボーダーの実装
@1000chUse conic gradients to create a cool border で紹介されている conic-gradient() を使った扇形グラデーションを CSS で実装する方法について。
グラデーションにはいくつか種類があり、この扇形グラデーションの他にも、線形グラデーションを表現する linear-gradient()、放射形グラデーションを表現する radial-gradient() がある。また、それぞれの反復グラデーションとして、repeating-conic-gradient() と repeating-linear-gradient() と repeating-radial-gradient() がある。
@1000ch
conic-gradient() 関数の構文
conic-gradient() - CSS: カスケーディングスタイルシート | MDN および CSS Image Values and Replaced Content Module Level 4 より。
conic-gradient(
[ from <angle> ]? [ at <position> ]?,
<angular-color-stop-list>
)
<angle>
from キーワードに続いて角度を指定することで、時計回りのグラデーションの位置を定義します。
<position>
background-positionプロパティと同じ長さ、順番、キーワード値を使用して、グラデーションの中心の位置を定義します。省略すると、既定値はcenter、すなわちグラデーションに配置されます。
<angular-color-stop-list>
<angular-color-stop-list> =
[ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>
<angular-color-stop> = <color> && <color-stop-angle>?
<angular-color-hint> = <angle-percentage>
<color-stop-angle> = <angle-percentage>{1,2}
経由地点における色と、それが円周軸におけるどの角度に位置するかを指定する。あまりこれを見てもピンとこないので、実際に書いてみる方がわかりやすい。
@1000chdemo1
.demo1 {
border: 10px solid;
border-image-slice: 1;
border-image-source: conic-gradient(
red 0deg,
orange 90deg,
yellow 180deg,
green 270deg,
blue 360deg
);
}
ボーダーの色をグラデーションさせるためには、border-image プロパティを使い、ソースとして conic-gradient() を参照している。赤、橙、黄、緑、青を並べており、赤が 0deg から始まり、青が 360deg で終了するように指定してある。この場合、赤と青が同じ場所（色経由地点）にあるため、色が連続せずグラデーションにならない。例えば blue ではなく、開始色である red を指定すれば色が連続する。
demo2
.demo2 {
border: 10px solid;
border-image-slice: 1;
border-image-source: conic-gradient(
hsl(360, 100%, 50%),
hsl(315, 100%, 50%),
hsl(270, 100%, 50%),
hsl(225, 100%, 50%),
hsl(180, 100%, 50%),
hsl(135, 100%, 50%),
hsl(90, 100%, 50%),
hsl(45, 100%, 50%),
hsl(0, 100%, 50%)
);
}
これは色相環を conic-gradient() で表現している mdn の公式サンプルで、先程の例とは異なり色が綺麗に連続している。
demo3
.demo3 {
border-radius: 50%;
padding: 10px;
background-image: conic-gradient(
hsl(221deg 95% 46%) 0deg,
hsl(221deg 95% 46%) 90deg,
hsl(293deg 70% 54%) 150deg,
hsl(293deg 70% 54%) 180deg,
hsl(293deg 70% 54%) 210deg,
hsl(221deg 95% 46%) 270deg,
hsl(221deg 95% 46%) 360deg
);
}
こちらのサンプルでは画像を border-radius: 50%; で正円にしている。しかし、border-image プロパティは border-radius プロパティの影響を受けないため、 background-image プロパティを使って要素の背景に扇形グラデーションを適用して、擬似的にボーダーを表現している。