content
Tailwind CSS Mask
The mask feature trims the content of an element into unique shapes, providing a simple way to create visually distinct designs.
By applying the class mask
along with mask-{shape-name}
to an element, you can utilize various shapes to clip your image.

Example of heart.

Example of hexagon.

Example of hexagon-2.

Example of decagon.
Example of pentagon.
Example of diamond.

Example of circle.

Example of parallelogram.

Example of parallelogram-2.

Example of parallelogram-3.

Example of parallelogram-4.

Example of star.

Example of star-2.

Example of triangle.

Example of triangle-2.

Example of triangle-3.

Example of triangle-4.

Utilizing the classes mask-half-1
and mask-half-2
in conjunction with mask-shape_name
allows you to isolate specific sides of the shape. mask-half-1
represents the left side, while mask-half-2
represents the right side. Incorporate these classes to enhance the style and appearance of your mask shapes.

Example of mask-half-2.
