The :before and :after add one element of 60px x 60px on each side of the original element. "border: 20px solid red;" and "border-radius: 50px 50px 0 50px;" ma

The :before and :after add one element of 60px x 60px on each side of the original element. "border: 20px solid red;" and "border-radius: 50px 50px 0 50px;" makes these elements' border round on three sides and square on the bottom right. (of bottom left for the :after element) "transform: rotate(-45deg);" and "transform: rotate(45deg);" turn the two elements so that their square corner meet in the middle, leaving one loop on each side.