コピペでできる。CSSだけで作るストライプ柄の背景パターン

背景にストライプ柄があるだけでポップな要素を表現できます。

基本的な使い方

CSSでストライプ柄を表現するためには、background-image: line-gradient();を使います。
line-gradient();属性は、通常グラデーションを表現するためのものです。なのですが、これをアレンジしてストライプ柄にすることができます。

このようにグラデーションを表現するには、色の始点と終点を設定します。
ストライプ柄にするにはその仕組みを利用して、6段階のグラデーション構成を作ることで出来上がります。

background-image: linear-gradient(
	-45deg,	// ストライプの角度
	#ffc107 25%, // 1つ目の色の終点
	#ffffff 25%, // 2つ目の色の始点
	#ffffff 50%, // 2つ目の色の終点
	#ffc107 50%, // 3つ目の色の始点
	#ffc107 75%, // 3つ目の色の終点
	#ffffff 75%, // 4つ目の色の始点
	#ffffff	// 4つ目の色の終点
);

実際のコードは上記のように記述する必要はありません。
このように、1行で記述してしまっても問題ありません。

background-image: linear-gradient(-45deg, #ffc107 25%, #ffffff 25%, #ffffff 50%, #ffc107 50%, #ffc107 75%, #ffffff 75%, #ffffff);

斜めストライプ

body {
	background-image: linear-gradient(-45deg, #ffc107 25%, #fff 25%, #fff 50%, #ffc107 50%, #ffc107 75%, #fff 75%, #fff);
	background-size: 30px 30px;
}

横（水平）ストライプ

body {
	background-image: linear-gradient(0deg, #ffc107 25%, #fff 25%, #fff 50%, #ffc107 50%, #ffc107 75%, #fff 75%, #fff);
	background-size: 30px 30px;
}

縦（垂直）ストライプ

body {
	background-image: linear-gradient(90deg, #ffc107 25%, #fff 25%, #fff 50%, #ffc107 50%, #ffc107 75%, #fff 75%, #fff);
	background-size: 30px 30px;
}