Triangle direction

Utilities for controling the direction of border triangles


Class reference

ClassProperties
triangle, triangle-*display: inline-block; width: 0; height: 0; border-style: solid; border-width: 0 var(--triangle-size) var(--triangle-size) var(--triangle-size); border-color: transparent transparent var(--triangle-background-color) transparent;
triangle-tborder-width: 0 var(--triangle-size-xs) var(--triangle-size-sm) var(--triangle-size-xs); border-color: transparent transparent var(--triangle-background-color) transparent;
triangle-rborder-width: var(--triangle-size-xs) 0 var(--triangle-size-xs) var(--triangle-size-sm); border-color: transparent transparent transparent var(--triangle-background-color);
triangle-bborder-width: var(--triangle-size-sm) var(--triangle-size-xs) 0 var(--triangle-size-xs); border-color: var(--triangle-background-color) transparent transparent transparent;
triangle-lborder-width: var(--triangle-size-xs) var(--triangle-size-sm) var(--triangle-size-xs) 0; border-color: transparent var(--triangle-background-color) transparent transparent;
triangle-trborder-width: 0 var(--triangle-size) var(--triangle-size) 0; border-color: transparent var(--triangle-background-color) transparent transparent;
triangle-brborder-width: 0 0 var(--triangle-size) var(--triangle-size); border-color: transparent transparent var(--triangle-background-color) transparent;
triangle-blborder-width: var(--triangle-size) 0 0 var(--triangle-size); border-color: transparent transparent transparent var(--triangle-background-color);
triangle-tlborder-width: var(--triangle-size) var(--triangle-size) 0 0; border-color: var(--triangle-background-color) transparent transparent transparent;

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