[装飾系]背景パターン 斜めピンドット風(ドット間にラインあり) パターン

CSS HTML
 2018.08.20

斜めピンドット風 パターン

repeating-linear-gradient、linear-gradientを使って作る斜めピンドット風の背景パターンです。
ドットとドットの間にラインが入っています。

browser:  65 11 20 10 
ニャン易度 
<div class="cp_bgpattern18"></div>
.cp_bgpattern18 {
	background-color: #ffffff;
	background-image:
	 radial-gradient(#3F51B5 4%, #3F51B5 7%, transparent 7%),
	 radial-gradient(#3F51B5 4%, #3F51B5 7%, transparent 7%),
	 linear-gradient(#ffffff 5%,#ffffff 5%,
		 transparent 15%, transparent 15%),
	 linear-gradient(45deg, transparent 30%, transparent 49%,
		 #9FA8DA 49%, #9FA8DA 50%,
		 transparent 50%, transparent 100%),
	 linear-gradient(-45deg, transparent 30%, transparent 49%,
		 #9FA8DA 49%, #9FA8DA 50%,
		 transparent 50%, transparent 100%);
	background-position: 50px 50px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
	background-size: 100px 100px,100px 100px,100% 4px,100px 100px,100px 100px;
}

copypet.jp

CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか?