Open2022/07/07にコメント追加3

CSS の conic-gradient() を使った扇形にグラデーションするボーダーの実装

Use 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}

経由地点における色と、それが円周軸におけるどの角度に位置するかを指定する。あまりこれを見てもピンとこないので、実際に書いてみる方がわかりやすい。

@1000ch

demo1

demo1.css

.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.css

.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.css

.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 プロパティを使って要素の背景に扇形グラデーションを適用して、擬似的にボーダーを表現している。

conic-gradient() 関数の構文

<angle>

<position>

<angular-color-stop-list>