Re:The Shapes of CSS
by Timothee on Friday August 12, 2011 @05:26PM
(#2879332)
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.
"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.