Triangle direction

Class reference

# Usage

Use the triangle-{direction} utilities to create a triangle from an elements borders in a set direction.

<div class="triangle-t triangle-lg triangle-green"></div>
<div class="triangle-tr triangle-lg triangle-green"></div>
<div class="triangle-r triangle-lg triangle-green"></div>
<div class="triangle-br triangle-lg triangle-green"></div>
<div class="triangle-b triangle-lg triangle-green"></div>
<div class="triangle-bl triangle-lg triangle-green"></div>
<div class="triangle-l triangle-lg triangle-green"></div>
<div class="triangle-tl triangle-lg triangle-green"></div>

# 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.

<div class="triangle-lg triangle-violet-400 hover:triangle-b"></div>

# 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.