CSS Masks vs Clip-path
Compare CSS masking with mask-image against clip-path and choose the right tool.
Two Ways to Hide Parts of an Element
CSS offers two mechanisms for making parts of an element invisible: clip-path and mask-image. They have different capabilities, performance characteristics, and use cases.
clip-path Review
clip-path uses CSS shape functions or SVG to define a hard-edged visible region. Everything outside the clip is completely invisible. No soft edges are possible.
.card { clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }