<div class="ka"></div>
<div class="dot"></div>
<div class="ka b1"></div>
<div class="ka b2"></div>
<div class="ka b3"></div>
<div class="ka b4"></div>
<div class="kb b5"></div>
<div class="kb b6"></div>
<div class="kb b7"></div>
<div class="kb b8"></div>
<style>
  body{
    background:#222730;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .ka{
    background:#4CAAB3;
    width:150px;
    height:150px;
    position:absolute;
    transform:rotate(45deg);
  }
  .kb{
    background:#222730;
    width:150px;
    height:150px;
    position:absolute;
  }
  .b1{
    left:-83;
    top:0;
  }
  .b2{
    left:-83;
    top:150;
  }
  .b3{
    right:-83;
    top:150;
  }
  .b4{
    right:-83;
    top:0;
  }
  .b5{
    top:-75;
    left:0;
  }
  .b6{
    top:225;
    left:0;
  }
  .b7{
    top:-75;
    right:0;
  }
  .b8{
    top:225;
    right:0;
  }


  .dot{
    background:#393E46;
    width:50px;
    height:50px;
    border-radius:50%;
    position:absolute;
  }
</style>