Triangle Opacity

Utilities for controling the opacity of border triangles


Class reference

ClassProperties
triangle-opacity-0--triangle-opacity: 0;
triangle-opacity-5--triangle-opacity: 0.05;
triangle-opacity-10--triangle-opacity: 0.1;
triangle-opacity-15--triangle-opacity: 0.15;
triangle-opacity-20--triangle-opacity: 0.2;
triangle-opacity-25--triangle-opacity: 0.25;
triangle-opacity-30--triangle-opacity: 0.3;
triangle-opacity-35--triangle-opacity: 0.35;
triangle-opacity-40--triangle-opacity: 0.4;
triangle-opacity-45--triangle-opacity: 0.45;
triangle-opacity-50--triangle-opacity: 0.5;
triangle-opacity-55--triangle-opacity: 0.55;
triangle-opacity-60--triangle-opacity: 0.6;
triangle-opacity-65--triangle-opacity: 0.65;
triangle-opacity-70--triangle-opacity: 0.7;
triangle-opacity-75--triangle-opacity: 0.75;
triangle-opacity-80--triangle-opacity: 0.8;
triangle-opacity-85--triangle-opacity: 0.85;
triangle-opacity-90--triangle-opacity: 0.9;
triangle-opacity-95--triangle-opacity: 0.95;
triangle-opacity-100--triangle-opacity: 1;

# Usage

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

100%
75%
50%
25%
5%
<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.