線形ストライプグラデーション Repeating Linear Gradient

線形ストライプグラデーションについて

線形ストライプグラデーションはbackgroundまたはbackground-imageプロパティにrepeating-linear-gradient関数を設定します。
基本的にはlinear-gradientと同じ動作と引数ですが、repeating-linear-gradientは色の位置を自動的に繰り返し、ストライプとして描画します。

【構文】

							background:repeating-linear-gradient(方向, 開始色 開始位置, 終了色 終了位置);
方向
名称 設定値 設定値（toなし）
上→下 to bottom top
下→上 to top bottom
左→右 to right left
右→左 to left right
左上→右下 to right bottom left top
右上→左下 to left bottom right bottom

【サンプル】

縦方向

横方向

斜め

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* 縦方向 */
div.sample {
    background:-webkit-repeating-linear-gradient(top, #f00 0, #00f 2px);
    background:-moz-repeating-linear-gradient(top, #f00 0, #00f 2px);
    background:-ms-repeating-linear-gradient(top, #f00 0, #00f 2px);
    background:-o-repeating-linear-gradient(top, #f00 0, #00f 2px);
    background:repeating-linear-gradient(to bottom, #f00 0, #00f 2px);
}
 
/* 横方向 */
div.sample {
    background:-webkit-repeating-linear-gradient(left, #f00 0, #00f 2px);
    background:-moz-repeating-linear-gradient(left, #f00 0, #00f 2px);
    background:-ms-repeating-linear-gradient(left, #f00 0, #00f 2px);
    background:-o-repeating-linear-gradient(left, #f00 0, #00f 2px);
    background:repeating-linear-gradient(to right, #f00 0, #00f 2px);
}
 
/* 斜め方向 */
div.sample {
    background:-webkit-repeating-linear-gradient(left top, #f00 0, #00f 3px);
    background:-moz-repeating-linear-gradient(left top, #f00 0, #00f 3px);
    background:-ms-repeating-linear-gradient(left top, #f00 0, #00f 3px);
    background:-o-repeating-linear-gradient(left top, #f00 0, #00f 3px);
    background:repeating-linear-gradient(to right bottom, #f00 0, #00f 3px);
}

CSS3逆引きリファレンス一覧へ戻る