CSSで描くボーダーやドット､チェック柄の背景パターン色々

等間隔ストライプ

間隔を変えたい場合は「12px」と､その2倍になるように「24px」を適宜調整｡

.bg_dot {
	background: linear-gradient(90deg, #ffc3a0 12px, #ffafbd 12px) 0 0 / 24px 24px;
}

非等間隔ストライプ

面積比率1:5の例

「4px」と「20px」を1:5になるようにしてます｡

.bg_dot {
	background: linear-gradient(90deg, #859FFA 4px, #4B60AD 4px) 0 0 / 20px 20px;
}

3色ストライプ

「8px」「16px」「24px」の値を「1:2:3」になるように適宜調整｡

.bg_dot {
	background: linear-gradient(90deg, #f78ca0 8px, #f9748f 8px, #f9748f 16px, #fe9a8b 16px) 0 0 / 24px 24px;
}

4色ストライプ

もう考えるな､感じろ｡

.bg_dot {
	background: linear-gradient(90deg, #3d3393 12px, #2b76b9 12px, #2b76b9 24px, #2cacd1 24px, #2cacd1 36px, #35eb93 36px) 0 0 / 48px 48px;
}

斜めストライプ (斜めボーダー)

repeating-linear-gradient 関数を使います｡

.bg_dot {
	background: repeating-linear-gradient(-45deg, #c1dfc4, #c1dfc4 12px, #deecdd 12px, #deecdd 24px);
}

3色斜めストライプ

「12px」「24px」「36px」を「1:2:3」になるように調整｡

.bg_dot {
	background: repeating-linear-gradient(-45deg, #ff8177, #ff8177 12px, #cf556c 12px, #cf556c 24px, #b12a5b 24px, #b12a5b 36px);
}

シンプルチェック

.bg_dot {
	background-color: #ffecd2;
	background-image: linear-gradient(-90deg, transparent 12px, #ffecd2 12px), linear-gradient(transparent 12px, #fcb69f 12px);
	background-position: 12px 0;
	background-size: 24px 24px;
}

互い違いチェック

これをギンガムチェックと呼ぶようです｡

.bg_dot {
	background: linear-gradient(45deg, #f6d365 25%, transparent 25%, transparent 75%, #f6d365 75%), linear-gradient(45deg, #f6d365 25%, transparent 25%, transparent 75%, #f6d365 75%);
	background-color: #fda085;
	background-size: 40px 40px;
	background-position: 0 0, 20px 20px;
}

間隔の空いたチェック

.bg_dot {
	background-color: #c2e9fb;
	background-image: linear-gradient(-90deg, transparent 6px, #a1c4fd 6px), linear-gradient(transparent 6px, #a1c4fd 6px);
	background-position: 6px 0;
	background-size: 24px 24px;
}

水玉ドット

.bg_dot {
	background: radial-gradient(#e2ebf0 30%, transparent 30%) 0 0 / 20px 20px #cfd9df;
}

間隔の空いた水玉ドット

.bg_dot {
	background: radial-gradient(#fccb90 15%, transparent 15%) 0 0 / 40px 40px #d57eeb;
}

互い違いの水玉ドット

.bg_dot {
	background-color: #4B60AD;
	background-image: radial-gradient(#859FFA 4px, transparent 4px), radial-gradient(#859FFA 4px, transparent 4px), radial-gradient(#fff 4px, transparent 4px);
	background-position: 60px 60px, 20px 20px, 0 0;
	background-size: 80px 80px, 80px 80px, 40px 40px;
}