Triangle direction
Utilities for controling the direction of border triangles
Class reference
Usage
Use the triangle-{direction}
utilities to create a triangle from an elements borders in a set direction.
Hover
To control the size of an triangle on hover, add the {hover}:
prefix to any existing triangle utility. For example, adding the class hover:triangle-b
to an element would apply the triangle-b
utility on hover.
Responsive
To control the size of an triangle at a specific breakpoint, add a {screen}:
prefix to any existing triangle utility. For example, adding the class md:triangle-xs
to an element would apply the triangle-xs
utility at medium screen sizes and above.
<div class="triangle md:triangle-xs"></div>
For more information about Elements’ responsive design features, check out the Responsive Design documentation.
On this Page
v1.13.5