Triangle Color

Utilities for controling the color of border triangles


Class reference

ClassProperties
triangle-current--triangle-background-color: currentColor;
triangle-transparent--triangle-background-color: transparent;
triangle-black--triangle-background-color: #000;
triangle-white--triangle-background-color: #FFF;
triangle-gray-0--triangle-background-color: #FDF8FF;
triangle-gray-100--triangle-background-color: #F8F6F9;
triangle-gray-200--triangle-background-color: #E9E7EA;
triangle-gray-300--triangle-background-color: #CFCBCE;
triangle-gray-400--triangle-background-color: #A8A3A7;
triangle-gray-500--triangle-background-color: #7B7479;
triangle-gray-600--triangle-background-color: #514B4F;
triangle-gray-700--triangle-background-color: #342E32;
triangle-gray-800--triangle-background-color: #231E21;
triangle-gray-900--triangle-background-color: #1A1217;
triangle-gray--triangle-background-color: #E9E7EA;
triangle-violet-0--triangle-background-color: #F6F3FF;
triangle-violet-100--triangle-background-color: #EFE4FF;
triangle-violet-200--triangle-background-color: #DCC4FF;
triangle-violet-300--triangle-background-color: #BD90FF;
triangle-violet-400--triangle-background-color: #944EFA;
triangle-violet-500--triangle-background-color: #680CE9;
triangle-violet-600--triangle-background-color: #5900BE;
triangle-violet-700--triangle-background-color: #49008F;
triangle-violet-800--triangle-background-color: #350061;
triangle-violet-900--triangle-background-color: #1E0033;
triangle-violet--triangle-background-color: #680CE9;
triangle-magenta-0--triangle-background-color: #FBF3FF;
triangle-magenta-100--triangle-background-color: #F7DDFF;
triangle-magenta-200--triangle-background-color: #EFB8FD;
triangle-magenta-300--triangle-background-color: #E583F7;
triangle-magenta-400--triangle-background-color: #D543ED;
triangle-magenta-500--triangle-background-color: #BF04DC;
triangle-magenta-600--triangle-background-color: #B400BA;
triangle-magenta-700--triangle-background-color: #92008A;
triangle-magenta-800--triangle-background-color: #630056;
triangle-magenta-900--triangle-background-color: #330029;
triangle-magenta--triangle-background-color: #BF04DC;
triangle-blue-0--triangle-background-color: #F4FDFF;
triangle-blue-100--triangle-background-color: #C2EBFD;
triangle-blue-200--triangle-background-color: #90C9F7;
triangle-blue-300--triangle-background-color: #64A0EB;
triangle-blue-400--triangle-background-color: #4177D8;
triangle-blue-500--triangle-background-color: #2753BF;
triangle-blue-600--triangle-background-color: #1637A1;
triangle-blue-700--triangle-background-color: #0B2381;
triangle-blue-800--triangle-background-color: #051560;
triangle-blue-900--triangle-background-color: #020D40;
triangle-blue--triangle-background-color: #64A0EB;
triangle-teal-0--triangle-background-color: #F4FFFC;
triangle-teal-100--triangle-background-color: #BEF8EC;
triangle-teal-200--triangle-background-color: #87E8DC;
triangle-teal-300--triangle-background-color: #57CDC8;
triangle-teal-400--triangle-background-color: #32A4A8;
triangle-teal-500--triangle-background-color: #1A777F;
triangle-teal-600--triangle-background-color: #0C515A;
triangle-teal-700--triangle-background-color: #05363E;
triangle-teal-800--triangle-background-color: #02272D;
triangle-teal-900--triangle-background-color: #012026;
triangle-teal--triangle-background-color: #57CDC8;
triangle-green-0--triangle-background-color: #F6FFF4;
triangle-green-100--triangle-background-color: #C0F8BE;
triangle-green-200--triangle-background-color: #87E891;
triangle-green-300--triangle-background-color: #57CD71;
triangle-green-400--triangle-background-color: #32A857;
triangle-green-500--triangle-background-color: #1A7F40;
triangle-green-600--triangle-background-color: #0C5A2D;
triangle-green-700--triangle-background-color: #053E20;
triangle-green-800--triangle-background-color: #022D17;
triangle-green-900--triangle-background-color: #012614;
triangle-green--triangle-background-color: #57CD71;
triangle-yellow-0--triangle-background-color: #FFFCF4;
triangle-yellow-100--triangle-background-color: #F9F0BF;
triangle-yellow-200--triangle-background-color: #EAE388;
triangle-yellow-300--triangle-background-color: #CECF58;
triangle-yellow-400--triangle-background-color: #A2A933;
triangle-yellow-500--triangle-background-color: #727D19;
triangle-yellow-600--triangle-background-color: #4A550B;
triangle-yellow-700--triangle-background-color: #303805;
triangle-yellow-800--triangle-background-color: #212702;
triangle-yellow-900--triangle-background-color: #1B2101;
triangle-yellow--triangle-background-color: #CECF58;
triangle-orange-0--triangle-background-color: #FFF7F4;
triangle-orange-100--triangle-background-color: #FDD0BC;
triangle-orange-200--triangle-background-color: #F6AB85;
triangle-orange-300--triangle-background-color: #E98C55;
triangle-orange-400--triangle-background-color: #D6722F;
triangle-orange-500--triangle-background-color: #BB5B16;
triangle-orange-600--triangle-background-color: #9B4606;
triangle-orange-700--triangle-background-color: #793500;
triangle-orange-800--triangle-background-color: #552600;
triangle-orange-900--triangle-background-color: #331700;
triangle-orange--triangle-background-color: #E98C55;
triangle-red-0--triangle-background-color: #FFF4F4;
triangle-red-100--triangle-background-color: #FDC2C4;
triangle-red-200--triangle-background-color: #F79092;
triangle-red-300--triangle-background-color: #EB6467;
triangle-red-400--triangle-background-color: #D84144;
triangle-red-500--triangle-background-color: #BF272A;
triangle-red-600--triangle-background-color: #A11618;
triangle-red-700--triangle-background-color: #810B0D;
triangle-red-800--triangle-background-color: #600507;
triangle-red-900--triangle-background-color: #400203;
triangle-red--triangle-background-color: #EB6467;
triangle-pink-0--triangle-background-color: #FFF4FF;
triangle-pink-100--triangle-background-color: #FDC2F5;
triangle-pink-200--triangle-background-color: #F790DB;
triangle-pink-300--triangle-background-color: #EB64B6;
triangle-pink-400--triangle-background-color: #D84190;
triangle-pink-500--triangle-background-color: #BF276C;
triangle-pink-600--triangle-background-color: #A1164E;
triangle-pink-700--triangle-background-color: #810B36;
triangle-pink-800--triangle-background-color: #600525;
triangle-pink-900--triangle-background-color: #400217;
triangle-pink--triangle-background-color: #EB64B6;
triangle-light--triangle-background-color: #FDF8FF;
triangle-dark--triangle-background-color: #342E32;
triangle-primary--triangle-background-color: #680CE9;
triangle-primary-light--triangle-background-color: #944EFA;
triangle-primary-dark--triangle-background-color: #5900BE;
triangle-secondary--triangle-background-color: #1E0033;
triangle-secondary-light--triangle-background-color: #49008F;
triangle-secondary-dark--triangle-background-color: #350061;
triangle-info--triangle-background-color: #64A0EB;
triangle-info-light--triangle-background-color: #90C9F7;
triangle-info-dark--triangle-background-color: #4177D8;
triangle-success--triangle-background-color: #57CD71;
triangle-success-light--triangle-background-color: #87E891;
triangle-success-dark--triangle-background-color: #32A857;
triangle-warning--triangle-background-color: #CECF58;
triangle-warning-light--triangle-background-color: #EAE388;
triangle-warning-dark--triangle-background-color: #A2A933;
triangle-danger--triangle-background-color: #EB6467;
triangle-danger-light--triangle-background-color: #F79092;
triangle-danger-dark--triangle-background-color: #D84144;
triangle-brand-primary--triangle-background-color: #680CE9;
triangle-brand-accent--triangle-background-color: #BF04DC;
triangle-brand-secondary--triangle-background-color: #1E0033;
triangle-brand-dark--triangle-background-color: #250D2E;

# Usage

Set the color of a triangle using the triangle-{color} utility classes.

<div class="triangle triangle-green"></div>
<div class="triangle triangle-teal"></div>
<div class="triangle triangle-blue"></div>
<div class="triangle triangle-violet"></div>
<div class="triangle triangle-magenta"></div>
<div class="triangle triangle-pink"></div>
<div class="triangle triangle-red"></div>
<div class="triangle triangle-orange"></div>
<div class="triangle triangle-yellow"></div>

# Opacity

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

<div class="triangle-lg triangle-blue triangle-opacity-100"></div>
<div class="triangle-lg triangle-blue triangle-opacity-75"></div>
<div class="triangle-lg triangle-blue triangle-opacity-50"></div>
<div class="triangle-lg triangle-blue triangle-opacity-25"></div>
<div class="triangle-lg triangle-blue triangle-opacity-5"></div>

Learn more in the triangle opacity documentation.

# Hover

To control the color of an triangle on hover, add the {hover}: prefix to any existing triangle utility. For example, adding the class hover:triangle-pink to an element would apply the triangle-pink utility on hover.

<div class="triangle-lg triangle-orange hover:triangle-pink"></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-blue to an element would apply the triangle-blue utility at medium screen sizes and above.

<div class="triangle triangle-green md:triangle-blue"></div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.