Mask

A mask crops the content of an element to a common shape.

Mask documentation

Class names

• component: mask
• style: mask-squircle, mask-heart, mask-hexagon, mask-hexagon-2, mask-decagon, mask-pentagon, mask-diamond, mask-square, mask-circle, mask-star, mask-star-2, mask-triangle, mask-triangle-2, mask-triangle-3, mask-triangle-4
• modifier: mask-half-1, mask-half-2

Syntax

<img class="mask {MODIFIER}" src="{image-url}" />

Rules

• You must specify {MODIFIER}. It can be one of the style or modifier class names.
• To change the shape of an element, use the mask class names.
• To set a custom size, use w-* and h-*.