CENTROID-CENTRED CSS TRIANGLE

Author:

  • uniphil
  • November 5, 2013

Made with:

  • HTML (Slim) / CSS (Sass)

About the code:

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.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: –

Download Demo and Code

Add a Comment

Your email address will not be published. Required fields are marked *