CSS:ストライプを描く

てっちゃん
てっちゃん

css-diagonal_line.png CSS3では背景にストライプを描けるようになりました。
縦・横・斜め それぞれとっても簡単。

使用するcssはこちら! [background-image: linear-gradient();

このタグはグラデーションを描くもの。
それを利用しちゃいます。
まずはストライプのみのCSS

body {
	background-image: linear-gradient(
		-45deg,
		#0084ff 25%,	/* a色 */
		#1aa6ff 25%,	/* b色:始点 */
		#1aa6ff 50%,	/* b色:終点 */
		#0084ff 50%,	/* c色:始点 */
		#0084ff 75%,	/* c色:終点 */
		#1aa6ff 75%,	/* d色:始点 */
		#1aa6ff			/* d色:終点 */
	);
	background-size: 30px 30px;
	background-attachment: fixed;
}

-45degは角度なので、この部分の数字を変更すれば縦だったり横だったりに設定できます!

background-sizeはストライプの間隔を設定できます。

background-attachment: fixed;はスクロールした時に背景を固定する場合に使用するのでお好みでつけたり外してください。

a色b色c色d色毎に色を分けると4色のストライプにもなるよ!

デモページ

デモページでそれぞれ紹介してるのでチェックしてください

***

また、そんなのめんどい!って思う人は
ジェネレーターもあるので、使ってみてくださいね
ジェネレーターサイト:https://css-stripe-generator.firebaseapp.com/

関連記事