--- title: Mask desc: Mask crops the content of the element to common shapes. layout: components classnames: component: - class: mask desc: Masks the content with shape style: - class: mask-squircle desc: squircle - class: mask-heart desc: heart - class: mask-hexagon desc: hexagon vertical - class: mask-hexagon-2 desc: hexagon horizontal - class: mask-decagon desc: decagon - class: mask-pentagon desc: pentagon - class: mask-diamond desc: diamond - class: mask-square desc: square - class: mask-circle desc: circle - class: mask-star desc: star - class: mask-star-2 desc: star (bold) - class: mask-triangle desc: triangle pointing top - class: mask-triangle-2 desc: triangle pointing down - class: mask-triangle-3 desc: triangle pointing left - class: mask-triangle-4 desc: triangle pointing right modifier: - class: mask-half-1 desc: Crops only the first half of mask - class: mask-half-2 desc: Crops only the second half of mask --- ### ~Squircle Squircle CSS mask ```html ``` ### ~Heart Heart CSS mask ```html ``` ### ~Hexagon Hexagon CSS mask ```html ``` ### ~Hexagon-2 (horizontal hexagon) Hexagon-2 CSS mask ```html ``` ### ~Decagon Decagon CSS mask ```html ``` ### ~Pentagon Pentagon CSS mask ```html ``` ### ~Diamond Diamond CSS mask ```html ``` ### ~Square Square CSS mask ```html ``` ### ~Circle Circle CSS mask ```html ``` ### ~Star Star CSS mask ```html ``` ### ~Star-2 (bold star) Star-2 CSS mask ```html ``` ### ~Triangle (pointing top) Triangle CSS mask ```html ``` ### ~Triangle-2 (pointing down) Triangle-2 CSS mask ```html ``` ### ~Triangle-3 (pointing left) Triangle-3 CSS mask ```html ``` ### ~Triangle-4 (pointing right) Triangle-4 CSS mask ```html ```