Elements logo

Triangle Size

Utilities for controling the size of border triangles

Class reference

ClassProperties
triangle-2xs--triangle-opacity: 0.75rem; --triangle-size-sm: calc( var(--triangle-size) * 0.75); --triangle-size-xs: calc( var(--triangle-size) * 0.66);
triangle-xs--triangle-opacity: 1rem; --triangle-size-sm: calc( var(--triangle-size) * 0.75); --triangle-size-xs: calc( var(--triangle-size) * 0.66);
triangle-sm--triangle-opacity: 1.125rem; --triangle-size-sm: calc( var(--triangle-size) * 0.75); --triangle-size-xs: calc( var(--triangle-size) * 0.66);
triangle-md--triangle-opacity: 1.5rem; --triangle-size-sm: calc( var(--triangle-size) * 0.75); --triangle-size-xs: calc( var(--triangle-size) * 0.66);
triangle-lg--triangle-opacity: 2rem; --triangle-size-sm: calc( var(--triangle-size) * 0.75); --triangle-size-xs: calc( var(--triangle-size) * 0.66);
triangle-xl--triangle-opacity: 3rem; --triangle-size-sm: calc( var(--triangle-size) * 0.75); --triangle-size-xs: calc( var(--triangle-size) * 0.66);
triangle-2xl--triangle-opacity: 3.5rem; --triangle-size-sm: calc( var(--triangle-size) * 0.75); --triangle-size-xs: calc( var(--triangle-size) * 0.66);
triangle-3xl--triangle-opacity: 4rem; --triangle-size-sm: calc( var(--triangle-size) * 0.75); --triangle-size-xs: calc( var(--triangle-size) * 0.66);
triangle-4xl--triangle-opacity: 4.5rem; --triangle-size-sm: calc( var(--triangle-size) * 0.75); --triangle-size-xs: calc( var(--triangle-size) * 0.66);

Usage

Adjust size of a triangle using the triangle-{size} utility classes.

<div class="flex flex-col justify-center text-yellow-700 font-semibold text-sm">
2xs
xs
sm
md
lg
xl
2xl
3xl
4xl
<div class="triangle triangle-2xs"></div>
<div class="triangle triangle-xs"></div>
<div class="triangle triangle-sm"></div>
<div class="triangle triangle-md"></div>
<div class="triangle triangle-lg"></div>
<div class="triangle triangle-xl"></div>
<div class="triangle triangle-2xl"></div>
<div class="triangle triangle-3xl"></div>
<div class="triangle triangle-4xl"></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-lg to an element would apply the triangle-lg utility on hover.

<div class="triangle-sm hover:triangle-lg triangle-orange"></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.