CSSだけで背景ストライプを実装するのに便利なrepeating-linear-gradient()
リピート用の背景画像をちまちまスライスしていたころが懐かしい。。
「repeating-linear-gradient」の書き方
とりあえずサンプル。黄色背景に透過の白ストライプを配置した。
background-size: auto auto; background-color: rgba(251, 215, 74, 1); background-image: repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(255, 255, 255, 0.3) 6px, rgba(255, 255, 255, 0.3) 8px );
サンプル１
例：黄色6px、白2pxのストライプ
・開始色：黄色、位置：6px
・途中色：白、途中色6px
終了色も白で終了色の位置は8px（6px＋2px）。これを繰り返してストライプを実装する。
background-image: repeating-linear-gradient()が基本、,（カンマ）区切りで複数指定も可
repeating-linear-gradient(角度または方向, 開始色 位置, 途中色 位置, 終了色 位置)で記述する
(1)角度または方向
角度：0degが横ストライプで下から上にグラデーションされていく。
background-image: repeating-linear-gradient(0deg, #ccc, #ccc 10%, #000 10%, #000 20% );
サンプル２
方向：こちらもbottomがスタート。to left top で右下から左上に向かってグラデーションされていく。
background-image: repeating-linear-gradient(to left top, #ccc, #ccc 10%, #000 10%, #000 20% );
サンプル３
(2)開始色 位置, 途中色 位置, 終了色 位置
位置：%かpxで指定する。コンテンツのすべてを埋めるまでリピートされる。
色と位置：基本はグラデーションになる。隣り合う色を同じ位置で指定するとストライプになる。
コンテンツ背景に指定色のストライプを重ねたい場合はtransparentを使う（冒頭のサンプル１を参照）
- 参考サイト・関連ページ
