Triangle Size
Utilities for controling the size of border triangles
Class reference
Usage
Adjust size of a triangle using the triangle-{size}
utility classes.
xs
sm
md
lg
xl
2xl
3xl
4xl
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-lg
to an element would apply the triangle-lg
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.