Some handy little LESS and SASS mixins to generate the perfect equilateral triangle, for any direction.

LESS mixin

SASS mixin

Example markup

Example usage

Result

In this example we can place our css triangle inline with the text of an element by using the :after or ::after pseudo selector, without any absolute or relative positioning. You can of course place it before the text content by using the :before or ::before pseudo selector.

A note on : vs ::

All modern browsers support the double colon (::) CSS3 syntax, the single colon(:) is also however also supported for backwards compatibility. IE8 only supports the single colon.

Snippet

LEAVE A COMMENT

Notify of
avatar
wpDiscuz