<div class="container">
	<p>ドット1(円1px/背景12px×12px)</p>
	<div class="dot dot1"></div>
	<p>ドット2(円30%/背景30px×30px)</p>
	<div class="dot dot2"></div>
	<p>ドット3(斜め/円1px/背景16px×16px)</p>
	<div class="dot dot3"></div>
</div>
.container {
	max-width: min(95%, 800px);
	margin-left: auto;
	margin-right: auto;
}
.dot {
	height: 200px;
}
.dot1 {
	background-color: #FBFDFD;
	background-image: radial-gradient(circle at center, #3A3F58 1px, transparent 1px, transparent 12px);
	background-size: 12px 12px;
}
.dot2 {
	background-color: #FBFDFD;
	background-image: radial-gradient(#3A3F58 30%, transparent 30%);
	background-size: 30px 30px;
}
.dot3 {
	background-color: #FBFDFD;
	background-image: radial-gradient(#3A3F58 1px, transparent 1px),radial-gradient(#3A3F58 1px, transparent 1px);
	background-size: 16px 16px;
	background-position: 0 0, 8px 8px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.