CSS3

CSS関数

repeating-conic-gradient()

[Edge]○。→●、mdn

円錐グラデーション（繰り返す）。

from <angle>

グラデーション処理の開始位置。時計の12時の位置からの角度。

<DIV style="border:1px solid red; width:100px; height:100px;
 background:repeating-conic-gradient(from 30deg, red, yellow);
">テスト
</DIV>

background-colorではできなかった

at <position>

扇形グラデーションの中心位置。

<DIV style="border:1px solid red; width:100px; height:100px;
 background:repeating-conic-gradient(at 20% 50%,red, yellow);
">テスト
</DIV>

[<color>? <angle>{1,2}?]#

<color>と<angle>。これらのセット毎に、カンマで区切って指定する。from、at部との区切りにもカンマが必要。

<angle>は、1個指定した場合は終了角度。2個指定した場合は、1個目が開始角度、2個目が終了角度。

角度の切れ目が合わない場合は、ぼかされるようだ。

<DIV style="border:1px solid red; width:100px; height:100px;
 background:repeating-conic-gradient(red, yellow);
">テスト
</DIV>

<DIV style="border:1px solid red; width:100px; height:100px;
 background:repeating-conic-gradient(red 30deg, yellow);
">テスト
</DIV>

<DIV style="border:1px solid red; width:100px; height:100px;
 background:repeating-conic-gradient(red, yellow 30deg);
">テスト
</DIV>

<DIV style="border:1px solid red; width:100px; height:100px;
 background:repeating-conic-gradient(red 30deg, yellow 30deg);
">テスト
</DIV>

<DIV style="border:1px solid red; width:100px; height:100px;
 background:repeating-conic-gradient(red 30deg, yellow 60deg);
">テスト
</DIV>

<DIV style="border:1px solid red; width:100px; height:100px;
 background:repeating-conic-gradient(red 30deg 60deg, yellow);
">テスト
</DIV>

<DIV style="border:1px solid red; width:100px; height:100px;
 background:repeating-conic-gradient(red, yellow 30deg 60deg);
">テスト
</DIV>

<angle> ○

gradient 全体がこの角度で回転される。省略時の既定は、0deg になる。角度 0 の場合、<angle> の単位識別子は省略してもよい。

<position>

＝[ left | center | right ] || [ top | center | bottom ]
| [ left | center | right | <length-percentage> ]
[ top | center | bottom | <length-percentage> ]?
| [ [ left | right ] <length-percentage> ] &&
[ [ top | bottom ] <length-percentage> ]

gradient の gradient 中心 を決定する。値は radial-gradient() に対するときと同じに解決される。この引数が省略された場合の既定は center とする。

例

関連

linear-gradient()、conic-gradient()、radial-gradient()。

repeating-linear-gradient()、repeating-conic-gradient()、repeating-radial-gradient()。

テスト