/*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); }