cssで背景をストライプにする方法

こんにちは。ささめまです。

WEBサイトが爽やか雰囲気になる背景をご紹介します。

＼ コピペでそのまま使えます ／

demo

sample

code

<div class="bg_stripe"></div>

.bg_stripe {
	width: 200px;
	height: 100px;
	background-color: #81d8d0;
	background-image: linear-gradient(-90deg, #fff 50%, transparent 50%);
	background-size: 10px 10px;
}

design

パステルカラーの極太ストライプにすればちょっとフレンチな感じに、極細で隙間を広めに開けるとモダンな雰囲気になります。
divをborder-radiusで丸くすれば、装飾用モチーフとしても使えそうです。丸や四角ならsvgを使わなくてもモチーフを散りばめるのに使えますね。
変幻自在の便利css、是非使ってみてください。