<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.