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

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

WEBサイトがちょっとポップな雰囲気になる背景をご紹介します。

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


demo

sample


code

<div class="bg_stripe"></div>
.bg_stripe {
	width: 200px;
	height: 100px;
	background-color: #81d8d0;
	background-image: repeating-linear-gradient(-45deg,#fff, #fff 5px,transparent 0, transparent 10px);
	background-size: 14px 14px;
}

design

薄い色の極細ストライプにして文字の背景にしたり、ボタンの影にしたらめちゃんこ楽しい雰囲気になります。
・GO TO トラベル公式（https://goto.jata-net.or.jp/）
・T-SITE SHOPPINGのクリスマス（https://store.tsite.jp/feature/337.html）
に使われているので使い方のアイデアにどうぞ！

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、是非使ってみてください。