SOURCE

<div class="wrapper">
  <div class="box1">
    <div class="point1"></div>
    <div class="point2"></div>
    <div class="point3"></div>
    <div class="point4"></div>
  </div>
  <div class="box2">
    <div class="point1"></div>
    <div class="point2"></div>
    <div class="point3"></div>
    <div class="point4"></div>
  </div>
  
</div>

.wrapper{
  width: 40px;
  height: 40px;
  margin: 30px auto;
  position: relative;  
}
.wrapper{
  position: relative;
}

.box1{
  width:100%;
  height: 100%;
  outline: 1px solid red;
  position: absolute;
}

.box1>div{
  width: 10px;
  height: 10px;
  background: blue;
  border-radius: 50%;
  position: absolute;
}

.point1{ left: 0; top:0; }
.point2{ right: 0; top:0; }
.point3{ bottom: 0; left:0; }
.point4{ bottom: 0; right:0; }

.box2{
  width:100%;
  height: 100%;
  outline: 1px solid red;
  position: absolute;
  
  outline: 1px solid blue;
  transform: rotate(45deg);
}

.box2>div{
  width: 10px;
  height: 10px;
  background: blue;
  border-radius: 50%;
  position: absolute;
}