/*html content*/

<div class="flex-box">

  <div class="square top"></div>

  <div class="square bottom"></div>

  <div class="square left"></div>
  
  <div class="square right"></div>
  
</div>  
/*css content*/


/* flex-box */
.flex-box {
  display: flex;
  width: 100%;
  margin-top: 75px;
}

/* square */
.square {
  background-color: pink;
  height: 200px;
  width: 200px;
  margin: auto;
  border: black solid 2px; 
  position: relative;
}


/* creating a pseudo element square with a border top and left that is then rotated 45deg and positioned on top of the box to look like a triangle - this one has been coloured peach to provide visual explanation  */
.top::after {
  content: '';
  height: 20px;
  width: 20px;
  position: absolute;
  background-color: peachpuff;
  top: -12px;
  left: 45%;
  border-top: black solid 2px;
  border-left: black solid 2px;
  transform: rotate(45deg);
}

/* only change degrees on rotate and bottom position */
.bottom::after {
  content: '';
  height: 20px;
  width: 20px;
  position: absolute;
  background-color: pink;
  bottom: -12px;
  left: 45%;
  border-top: black solid 2px;
  border-left: black solid 2px;
  transform: rotate(225deg);
}

/* changed transform:rotate deg's, top and left */
.left::after {
  content: '';
  height: 20px;
  width: 20px;
  position: absolute;
  background-color: pink;
  top: 45%;
  left: -12px;
  border-top: black solid 2px;
  border-left: black solid 2px;
  transform: rotate(-45deg);
}

/* changed transform:rotate deg's, top and right */
.right::after {
  content: '';
  height: 20px;
  width: 20px;
  position: absolute;
  background-color: pink;
  top: 45%;
  right: -12px;
  border-top: black solid 2px;
  border-left: black solid 2px;
  transform: rotate(135deg);
}