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.
