Mask

Mask crops the content of the element to common shapes.

Class name
Type
mask Component Masks the content with shape
mask-squircle
Modifier
Applies `squircle` shape
mask-heart
Modifier
Applies `heart` shape
mask-hexagon
Modifier
Applies `hexagon` shape
mask-hexagon-2
Modifier
Applies `hexagon` alternative shape
mask-decagon
Modifier
Applies `decagon` shape
mask-pentagon
Modifier
Applies `pentagon` shape
mask-diamond
Modifier
Applies `diamond` shape
mask-square
Modifier
Applies `square` shape
mask-circle
Modifier
Applies `circle` shape
mask-parallelogram
Modifier
Applies `parallelogram` shape
mask-parallelogram-2
Modifier
Applies `parallelogram` alternative shape
mask-parallelogram-3
Modifier
Applies `parallelogram` alternative shape
mask-parallelogram-4
Modifier
Applies `parallelogram` alternative shape
mask-star
Modifier
Applies `star` shape
mask-star-2
Modifier
Applies `star` alternative shape
mask-triangle
Modifier
Applies `triangle` shape
mask-triangle-2
Modifier
Applies `triangle` alternative shape
mask-triangle-3
Modifier
Applies `triangle` alternative shape
mask-triangle-4
Modifier
Applies `triangle` alternative shape
mask-half-1
Modifier
Crops only the first half of mask
mask-half-2
Modifier
Crops only the second half of mask
# Squircle
Squircle CSS mask
# Heart
Heart CSS mask
# Hexagon
Hexagon CSS mask
# Hexagon-2
Hexagon-2 CSS mask
# Decagon
Decagon CSS mask
# Pentagon
Pentagon CSS mask
# Diamond
Diamond CSS mask
# Square
Square CSS mask
# Circle
Circle CSS mask
# Parallelogram
Parallelogram CSS mask
# Parallelogram-2
Parallelogram-2 CSS mask
# Parallelogram-3
Parallelogram-3 CSS mask
# Parallelogram-4
Parallelogram-4 CSS mask
# Star
Star CSS mask
# Star-2
Star-2 CSS mask
# Triangle
Triangle CSS mask
# Triangle-2
Triangle-2 CSS mask
# Triangle-3
Triangle-3 CSS mask
# Triangle-4
Triangle-4 CSS mask