<p>ドット基本</p>
<div class="box bg_dot"></div>
<p>ドット大</p>
<div class="box bg_dot is-large"></div>
<p>ドット小</p>
<div class="box bg_dot is-small"></div>
<p>ダイヤ</p>
<div class="box bg_dot is-dia"></div>
.box{
width:100%;
height:200px;
}
/* ドット基本 */
.bg_dot{
background-color: #fff;
background-image:
radial-gradient(#7bded9 30%, transparent 30%);
background-size: 20px 20px;
}
/* ドット大 */
.is-large{
background-image:
radial-gradient(#7bded9 50%, transparent 50%);
}
/* ドット小 */
.is-small{
background-image:
radial-gradient(#888 10%, transparent 10%);
}
/* ダイヤ */
.is-dia{
background-image:
radial-gradient(#ff9797 76%, transparent 76%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.