CSS「repeating-linear-gradient」を使用して斜線や格子を実装

背景等で斜線や格子柄を実装する際に、以前は画像を作成して処理していたのですが、CSSのみで実装できる方法があったのでメモ。

CSS

//斜線
background: repeating-linear-gradient(135deg, #f00, #f00 6px, #fff 6px, #fff 18px);

「repeating-linear-gradient」は反復処理を行ってくれるので、パターンを指定することで斜線や格子が実装できます。

上記の斜線は角度135度、1色目（#f00）を0から6px、2色目（#fff）を6pxから18pxの間隔で繰り返します。
角度を0度、90度にすることで罫線（横線・縦線）の実装も可能です。
二重指定も可能なので、組み合わせることで格子状にもできます。

CSS

//格子状
background: repeating-linear-gradient(90deg, #000 , #000 1px, transparent 1px, transparent 32px), repeating-linear-gradient(0deg, #000 , #000 1px, #fff 1px, #fff 32px);

格子状の際には上位レイヤーの2色目に使用する色に透明色（transparent）を指定。
こちらを使用しない場合は下位レイヤーのパターンが塗りつぶされます。