data-clip

Responsive shape masking for images and figures using CSS shape() — hexagon, arch, swoosh, leaf, diagonal-frame, torn.

Overview

Apply data-clip to <img> or <figure> elements to mask them into responsive shapes. All shapes use percentage-based coordinates, so they scale with the element size. object-fit: cover is automatically enforced on clipped images.

Variants

Value Shape Best For
hexagon Six-sided polygon Avatars, profile photos, tech aesthetics
arch Rounded arch top, flat bottom Architectural photos, elegant presentations
swoosh Flat top, curved bottom-right Hero images, marketing banners
leaf Four-curve organic leaf Nature themes, organic aesthetics
diagonal-frame Parallelogram tilt Dynamic layouts, action/sports imagery
torn Jagged torn bottom edge Vintage, scrapbook, casual aesthetics

Usage

On <img> directly

<img data-clip="hexagon" src="avatar.jpg" alt="Profile photo" width="300" height="300"> <img data-clip="arch" src="building.jpg" alt="Cathedral entrance" width="400" height="400"> <img data-clip="torn" src="vintage.jpg" alt="Old photograph" width="640" height="400">

On <figure> container

When applied to <figure>, the clip targets the <img> inside, preserving the <figcaption> below the clipped image.

<figure data-clip="hexagon"> <img src="avatar.jpg" alt="Profile photo" width="300" height="300"> <figcaption>Team member</figcaption> </figure>

Demos