縞模様（ストライプ）を作るrepeating-linear-gradient

まっすぐなシマシマ

CSSでシマシマな縞模様（ストライプ）を作るためにパッと浮かぶのは本来グラデーションを作るために使われる background-image: inear-gradient() と background-size を使ったテクニックです。

.bg-stripe {
	background-image: linear-gradient(90deg, /* 90deg = to right */
		black 0%,  /* 黒 */
		black 50%, /* 黒 */
		white 50%, /* 白 */
		white 100% /* 白 */
	);
	background-repeat: repeat; /* 縦横どちらも繰り返す */
	background-size: 20px auto; /* 白・黒・縞どうしのサイズはどちらも10px(=20px÷2) */
}

範囲のうち半分（0〜50%）を黒、もう半分（50%〜100%）を白とすることで、グラデーションといいつつ境界のハッキリとしたボーダーを描画し、かつ background-size によって繰り返しグループ1回分のサイズ単位を制御することで以下のような縞模様ができます。
「黒・白」で1グループなので、10pxごとの縞模様にしたければ倍の20pxが単位になります。

※画像はイメージのため black は #999 に変更しています。

ただ、この方法では 0deg (to top )や 90deg（to right ）のように、垂直・平行でないとうまくいきません。135deg のように傾けてしまうと、以下のようなバラン型になってしまいます。これはこれで使う場面もありそうですが……。

斜めのシマシマ

垂直・平行方向にまっすぐでないシマシマを作るには頭に「repeating-」（繰り返す）を付けた repeating-linear-gradient を使います。

こちらなんとCSSのグラデーション表現が誕生した頃には既に使えるプロパティだったようで、IE（Internet Explorer）10での表示も可能なようです。

.bg-repeating-stripe {
	background-image: repeating-linear-gradient(135deg,
		black 0px,  /* 黒 */
		black 10px, /* 黒 */
		white 10px, /* 白 */
		white 20px /* 白 */
	);
	/* background-sizeやbackground-repeatは指定しない（auto）でも繰り返される */
}

これにより単位ごとに背景をリピートする方法では難しい斜めの縞模様ができます。

つまりグラデーションの内部で繰り返しを行った状態を背景画像として提供してくれるので、サイズ指定を background-image 内で行ってしまえば、 background-size や background-repeat はデフォルトのままシマシマで埋め尽くすことができます。

もちろん「まっすぐなシマシマ」にも repeating-linear-gradient を使うことができますが、 linear-gradient の感覚でサイズやリピートを指定してしまうと「外」と「内」の二重で繰り返しが発生してしまい、うまくいかないので注意してください。

失敗例

• 100%まで繰り返しているため、 linear-gradient と同じになってしまう例

.bg-repeating-repeating-stripe {
	background-image: repeating-linear-gradient(135deg, /* 90deg = to right */
		black 0%,  /* 黒 */
		black 50%, /* 黒 */
		white 50%, /* 白 */
		white 100% /* 白 */
	);
	background-repeat: repeat; /* 内部でもう繰り返してるのに外からも繰り返す */
	background-size: 20px auto; /* linear-gradientと同じ結果になる */
}

• サイズを制限してしまい二重に繰り返すことで表示が刻まれてしまう例

.bg-repeating-repeating-stripe {
	background-image: repeating-linear-gradient(135deg, /* 90deg = to right */
		black 0px,  /* 黒 */
		black 10px, /* 黒 */
		white 10px, /* 白 */
		white 20px /* 白 */
	);
	background-repeat: repeat; /* もう繰り返してるのにもう一回繰り返す */
	background-size: 20px auto; /* 斜めの時点で縞のサイズ≠背景の繰り返し幅のためズレる */
}

また repeating- による繰り返しグラデーションは他のグラデーション形式にも対応しており、 repeating-radial-gradient repeating-conic-gradient も同様に利用できます。
円形のストライプを使う機会なんてかなりサイケデリックな場面しかなさそうですが……🌀

使う頻度に対して対応環境が思った以上に広くてびっくりしたプロパティでした。（きちんとやるなら三角関数的な計算は必須です）

せっかくの午年ですしシマシマを作りたいときは積極的に活用していきましょう！