CSSの円錐曲線の紹介

CSSで線形グラデーションと放射状グラデーションを簡単に実行できます。現在、仕様でと定義される3番目のタイプのグラデーションがあります。 円錐曲線のグラデーションは放射状のグラデーションに似ていますが、カラーストップが作成される円の外縁にある点が異なります。

たとえば、同じ色のストップを持つ放射状グラデーションと円錐曲線を次に示します。

.gradient {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
.radial {
  background: radial-gradient(#FAE042, #4AAE9B);
}
.conic {
  background: conic-gradient(#FAE042, #4AAE9B);
}

そして、ここにマークアップがあります：

<div class="gradient radial"></div>
<div class="gradient conic"></div>

その他の例/構文

円錐曲線のグラデーションには、複数のカラーストップを含めることができます。

.conic {
  background: conic-gradient(cyan, magenta, yellow, black);
}

---

各色は、度、回転、パーセンテージなどの単位を使用して、停止位置を指定できます。

.conic {
  background: conic-gradient(red 180deg, #4AAE9B);
}
.conic-2 {
  background: conic-gradient(red 180deg 90%, #4AAE9B);
}

---

ハードストップ

カラーストップは、2つのストップ間の遷移を排除することにより、すぐに次のカラーにジャンプできます。

.conic-4 {
  background: conic-gradient(cyan 25%, magenta 0 50%, yellow 0 75%, black 0);
}

キーワードからおよびキーワードで

from キーワードを使用して、開始角度を指定できます。

.conic {
  background: conic-gradient(from 45deg, cyan, magenta, yellow);
}

さらに、 at キーワードを使用して、遷移の中心を指定できます。

.conic {
  background: conic-gradient(from 45deg at 65% 35%, cyan, magenta, yellow);
}

スムーズな移行

スムーズに移行するには、最後のカラーストップを最初のカラーストップと同じにします。

.conic {
  background: conic-gradient(cyan, magenta, yellow, cyan);
}

円錐曲線の勾配を繰り返す

もあります repeating-conic-gradient 円錐曲線でいくつかの興味深いパターンを作成するために使用できる関数：

.conic-repeating {
  background: repeating-conic-gradient(red 10%, #4AAE9B 20%);
}

ポリフィル

2020年の時点で、世界中で85% ofのデバイスのみが円錐勾配プロパティをサポートしています。 ありがたいことに、 polyfill by @LeaVerou があり、これを使用して円錐曲線の使用を開始できます。

ポリフィルを使用するには、プレフィックスフリーのスクリプトと、ページの終了本文タグの前に円錐曲線ポリフィル自体を追加するだけです。

<script src="/assets/polyfills/prefixfree.min.js"></script>
<script src="/assets/polyfills/conic-gradient.js"></script>