repeating-linear-gradient(角度または方向, 開始色 位置, 終了色 位置); で繰り返しの線形グラデーションを指定することができます。

<p>タグのボックスで使用例を挙げてみます。

下から上方向で10％までバイオレットからネイビー色へのグラデーションです。boxの高さが200pxなので 200×10%=20で各境界線までの位置は 20pxの高さとなり20pxが10個の繰り返しグラデーションとなります。

【ブラウザ表示】

繰り返し

<p class="senkei_gbox7">繰り返し</p>

p.senkei_gbox7{
width:200px;
height:200px;
background:repeating-linear-gradient(0deg, violet, navy 10%);
}

<p style="width:200px; height:200px; background:repeating-linear-gradient(0deg, violet, navy 10%);">繰り返し</p>

■ 格子状グラデーション

下から上方向と左から右方向のグラデーションを組み合わせることでビルのような見た目の格子状にすることができます。

【ブラウザ表示】

ビル

<p class="senkei_gbox8">ビル</p>

p.senkei_gbox8{
width:200px;
height:200px;
background:repeating-linear-gradient(0deg, #33CCFF, #33CCFF 10px, transparent 25px), repeating-linear-
gradient(90deg, #33CCFF, #33CCFF 10px, transparent 25px);
}

<p style="width:200px; height:200px; background:repeating-linear-gradient(0deg, #33CCFF, #33CCFF 10px, transparent 25px), repeating-linear-gradient(90deg, #33CCFF, #33CCFF 10px, transparent 25px);">ビル</p>

■ その他の項目

スタイルシート一覧のページに戻る