<div class="wrapper">
  <div class="main">
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
    <div class="text"></div>
  </div>
</div>

.wrapper {
  max-width: 400px;
  width: 100%;
  margin: 100px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.main {
  position: relative;
  width: 200px;
  height: 200px;
  background: red;
}

.text {
  position: absolute;
  width: 100px;
  height: 60px;
  background: green;
  &:before {
    content: '';
    position: absolute;
    width: 50px;
    height: 1px;
    background: #ccc;
  }
  &:after {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    border: 1px solid red;
  }
  &:nth-child(1) {
    left: -150px;
    top: -50px;
    &:before {
      right: -60px;
      bottom: 0;
      transform: rotate(45deg) translate(0px, 25px);
    }
    &:after {
      bottom: -39px;
      right: -39px;
    }
  }
   &:nth-child(2) {
    left: -150px;
    bottom: -50px;
     &:before {
      right: -60px;
      top: 0;
      transform: rotate(-45deg) translate(0px, -25px);
    }
     &:after {
      top: -39px;
      right: -39px;
    }
  }
   &:nth-child(3) {
    right: -150px;
    top: -50px; 
     &:before {
      left: -60px;
      bottom: 0;
      transform: rotate(-45deg) translate(0px, 25px);
    }
     &:after {
      bottom: -39px;
      left: -39px;
    }
  }
   &:nth-child(4) {
    right: -150px;
    bottom: -50px;
     &:before {
      left: -60px;
      top: 0;
      transform: rotate(45deg) translate(0px, -25px);
    }
     &:after {
      top: -39px;
      left: -39px;
    }
  }
}