Triangle Color

Class reference

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