Centroid-Centred Css Triangle

See the Pen Centroid-Centred Css Triangle by uniphil (@uniphil) on CodePen.

Centroid-Centred Css Triangle

Description: CSS rotations centre on bounding boxes, so triangles are not rotated on their centroid. Using the :after pseudo-element for the triangle, the original element may be given a height and width to create bounding box centred around the triangle's centroid.

Browsers: Chrome Edge Firefox Opera Safari

Made with: HTML (Slim) CSS (Sass)

Posted: 5.11.2013

Similar Examples