Triangle Opacity

Class reference

# Usage

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

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

# Hover

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

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

<div class="triangle triangle-opacity-75 md:triangle-opacity-50"></div>

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