CSS円錐曲線グラデーション
CSS円錐曲線グラデーション
円錐曲線は、中心点を中心に回転する色の変化を伴うグラデーションです。
円錐曲線を作成するには、少なくとも2つの色を定義する必要があります。
構文
background-image: conic-gradient([from angle] [at position,] color
[degree], color [degree], ...);
デフォルトでは、角度は0度、位置は中心です。
次数が指定されていない場合、色は中心点の周りに均等に広がります。
円錐曲線：3色
次の例は、3色の円錐曲線を示しています。
例
3色の円錐曲線：
#grad {
background-image: conic-gradient(red, yellow, green);
}
円錐曲線：5色
次の例は、5色の円錐曲線を示しています。
例
5色の円錐曲線：
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}
円錐曲線：3つの色と度
次の例は、3つの色と各色の次数を持つ円錐曲線を示しています。
例
3色と各色の次数を持つ円錐曲線：
#grad {
background-image: conic-gradient(red 45deg, yellow
90deg, green 210deg);
}
円グラフを作成する
border-radius: 50%円錐曲線のグラデーションをパイのように見せるために追加するだけです。
例
#grad {
background-image: conic-gradient(red, yellow, green, blue,
black);
border-radius: 50%;
}
これは、すべての色に対して次数が定義された別の円グラフです。
例
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow
180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}
角度から指定された円錐曲線
[from angle ]は、円錐曲線全体が回転する角度を指定します。
次の例は、角度が90度の円錐曲線を示しています。
例
from角度の円錐曲線：
#grad {
background-image: conic-gradient(from 90deg, red, yellow,
green);
}
指定された中心位置を持つ円錐曲線
[at位置]は円錐曲線の中心を指定します。
次の例は、中心位置が60％45％の円錐曲線を示しています。
例
中心位置が指定された円錐曲線：
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow,
green);
}
円錐曲線のグラデーションを繰り返す
このrepeating-conic-gradient()関数は、円錐曲線のグラデーションを繰り返すために使用されます。
例
円錐曲線のグラデーションの繰り返し：
#grad {
background-image:
repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
これは、定義されたカラースタートとカラーストップを持つ円錐曲線の繰り返しです。
例
定義されたカラースタートとカラーストップを持つ繰り返し円錐曲線：
#grad {
background-image:
repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}
CSS勾配関数
次の表に、CSSグラデーション関数を示します。
| Function | Description |
|---|---|
| conic-gradient() | Creates a conic gradient. Define at least two colors (around a center point) |
| linear-gradient() | Creates a linear gradient. Define at least two colors (top to bottom) |
| radial-gradient() | Creates a radial gradient. Define at least two colors (center to edges) |
| repeating-conic-gradient() | Repeats a conic gradient |
| repeating-linear-gradient() | Repeats a linear gradient |
| repeating-radial-gradient() | Repeats a radial gradient |