コピペでできる。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;
}

コメントをする

お問い合わせ・ご相談

お見積りのご依頼やそのほかのお仕事のご相談などはお問い合わせフォームからお問い合わせください。

お問い合わせする
会社案内ダウンロード

弊社の会社案内をPDFでご用意しております。社内での検討時などにご利用ください。

ダウンロードする

お電話でのお問い合わせはこちら

※電話番号はおかけ間違いのないようご注意ください。
※セールス目的のお電話はご遠慮ください。