# Masks Clip elements to a variety of decorative shapes using CSS mask-image. ```astro Avatar Avatar Avatar Avatar Avatar Avatar Avatar Avatar Avatar Avatar Avatar Avatar Avatar Avatar Avatar ``` ## Shapes Apply classes `mask mask-{shape}` with any of the shapes defined below. ### Circle ```astro Avatar ``` ### Squircle ```astro Avatar ``` ### Triangle Up ```astro Avatar ``` ### Triangle Down ```astro Avatar ``` ### Triangle Right ```astro Avatar ``` ### Triangle Left ```astro Avatar ``` ### Diamond ```astro Avatar ``` ### Pentagon ```astro Avatar ``` ### Hexagon ```astro Avatar ``` ### Cube ```astro Avatar ``` ### Octagon ```astro Avatar ``` ### Decagon ```astro Avatar ``` ### Star ```astro Avatar ``` ### Heart ```astro Avatar ``` ### Cross ```astro Avatar ``` ## Custom Masks Define your own custom shape. Any valid [CSS mask source](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/mask) will work. ```css @utility mask-custom { mask-image: url('/path/to/your-shape.svg'); } ``` ```html Avatar ```