<p>ドット斜め</p>
<div class="box bg_skew_dot"></div>

<p>ドット色違い</p>
<div class="box bg_skew_dot is-mix"></div>

<p>ドットサイズ違い</p>
<div class="box bg_skew_dot is-size"></div>

.box{
  width:100%;
  height:200px;
}

/* ドット斜め */
.bg_skew_dot{
  background-color: #fff;
  background-image:
    radial-gradient(#7bded9 20%, transparent 20%),
    radial-gradient(#7bded9 20%, transparent 20%);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
}

/* ドット色違い */
.is-mix{
  background-image:
    radial-gradient(#b4f3ea 20%, transparent 20%),
    radial-gradient(#ffbcbc 20%, transparent 20%);
}

/* ドットサイズ違い */
.is-size{
  background-image:
    radial-gradient(#ffbcbc 20%, transparent 20%),
    radial-gradient(#ffbcbc 35%, transparent 35%);
}