OnlineCBT
Clip a shape or mask its transparency
clip-path defines a visible region, often with geometric shapes. A mask uses an image or gradient to determine visibility through alpha or luminance rules. Neither changes the element's normal-flow layout box into the apparent outline.
.avatar {
width: 8rem;
aspect-ratio: 1;
object-fit: cover;
clip-path: circle(50%);
}
.label {
padding: 1rem 2rem;
background: #1d4ed8;
color: white;
clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
}The image paints inside a circular region. The label gains an arrow-like edge. Its rectangular layout space still exists, so neighboring boxes do not automatically wrap around the clipped polygon.
A fading mask
.fade-image {
mask-image: linear-gradient(black 70%, transparent);
}For a gradient's usual alpha-mask use, opaque portions remain visible and transparent portions disappear. Luminance masks follow different intensity rules. Test the actual mask source and supported syntax rather than assuming every black/white image behaves identically.
Protect content and focus
Clipping a button can also clip a focus outline or make its clickable appearance confusing. Keep the interactive target large and the focus indicator visible. Do not clip essential text simply to preserve a decorative shape; allow content to grow or put decoration on a separate layer.
Fallbacks
Start with a usable rectangular box. Add the clipping enhancement with support checks when required by the project's browser targets. A decorative image should remain acceptable if a mask is unavailable.
Practice
- Change the avatar to an ellipse and compare the visible region with its layout box.
- Place long text in the label and inspect clipping.
- Tab to any clipped control and confirm focus remains visible.
- Compare a gradient alpha mask with a geometric clip-path.
