CSS3

CSS関数

repeating-linear-gradient()

[Edge]○。→●、mdn

直線グラデーション（繰り返す）。

<angle> ○

グラデーションの角度。

<DIV style="width:100px; height:100px;
 background-image:repeating-linear-gradient(0deg, red, yellow);
">あ</DIV>

<DIV style="width:100px; height:100px;
 background-image:repeating-linear-gradient(20deg, red, yellow);
">あ</DIV>

<DIV style="width:100px; height:100px;
 background-image:repeating-linear-gradient(90deg, red, yellow);
">あ</DIV>

<side-or-corner>

＝[left | right] || [top | bottom]

<DIV style="width:100px; height:100px;
 background-image:repeating-linear-gradient(to top, red,yellow);
">あ</DIV>

<DIV style="width:100px; height:100px;
 background-image:repeating-linear-gradient(to top left, red,yellow);
">あ</DIV>

<color-stop-list>

＝<linear-color-stop> , [ [<linear-color-hint>,]? <linear-color-stop> ]#

<linear-color-stop>

＝<color> && <length-percentage>?

<DIV style="width:100px; height:100px;
 background-image:repeating-linear-gradient(red, yellow);
">あ</DIV>

<DIV style="width:100px; height:100px;
 background-image:repeating-linear-gradient(red 20px, yellow);
">あ</DIV>

¶redの20pxは開始位置？

<DIV style="width:100px; height:100px;
 background-image:repeating-linear-gradient(red, yellow 20px);
">あ</DIV>

20pxまでにパターンが終了し、後は繰り返し

<DIV style="width:100px; height:100px;
 background-image:repeating-linear-gradient(red, 20px, yellow 20px);
">あ</DIV>

¶

<DIV style="width:100px; height:100px;
 background-image:repeating-linear-gradient(red 20px, yellow 40px);
">あ</DIV>

最初の<length-percentage>は開始位置で、
最初の<length-percentage>は終了位置？

<DIV style="width:100px; height:100px;
 background-image:repeating-linear-gradient(red 20px, yellow 80px);
">あ</DIV>

<linear-color-hint>

＝<length-percentage>

<DIV style="width:100px; height:100px;
 background-image:repeating-linear-gradient(red, 20px, yellow);
">あ</DIV>

<DIV style="width:100px; height:100px;
 background-image:repeating-linear-gradient(red, 80px, yellow);
">あ</DIV>

関連

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

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

テスト