SOURCE

<div class='h-line'></div>
<div class='v-line'></div>
<div class='deg-line'></div>
<div class='net-line'></div>
<div class='net-block'></div>
<div class='net-line-block'></div>
<div class='point'></div>
<!-- 画两个直角三角形拼接，错位再来一遍 -->
<div class='chessboard'></div>

div{
  width:200px;
  height:200px;
  display:inline-block;
}
.h-line{
  background:linear-gradient(greenyellow 30%,transparent 0);
  background-size:100% 30px;
}
.v-line{
  background:linear-gradient(to right,greenyellow 50%, pink 0);
  background-size:20px 100%;
}
.deg-line{
  background:repeating-linear-gradient(45deg,greenyellow 0,greenyellow 15px,pink 0,pink 30px);
}
.net-line{
  background:linear-gradient(greenyellow 1px,transparent 0),
             linear-gradient(90deg,pink 1px,transparent 0);
  background-size:20px 20px;
}
.net-block{
  background:white;
  background-image:linear-gradient(rgba(200,0,0,.5) 50%,transparent 0),
                   linear-gradient(90deg,rgba(200,0,0,.5) 50%,transparent 0);
  background-size:30px 30px,30px,30px;
}
.net-line-block{
  background-color:#58a;
  background-image:linear-gradient(white 1px,transparent 0),
                   linear-gradient(90deg,white 1px,transparent 0),
                   linear-gradient(white 3px,transparent 0),
                   linear-gradient(90deg,white 3px,transparent 0);
  background-size:15px 15px,15px 15px,75px 75px,75px,75px;
}
.point{
  background-color:#655;
  background-image:radial-gradient(tan 30%,transparent 0),
                   radial-gradient(tan 30%,transparent 0);
  background-size:30px 30px;
  background-position:0 0,15px 15px;
}
.chessboard{
  background-color:#eee;
  background-image:linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0),
                   linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0);
  background-size:30px 30px;
  background-position:0 0,15px 15px;
  
}