Codectionary / Developer documentation / CSS

Clipping Boxes with clip-path

clip-path restricts an element’s visible region to a shape or referenced clipping path. Basic shapes such as circle() and polygon() provide responsive decorative crops. Clipping affects rendering and hit testing, but does not change the element’s rectangular layout footprint.

Syntax

.badge { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }

Examples

Clipping Boxes with clip-path: working example

Run this CSS against the example’s own HTML. The explanation describes the expected result.

/* Neutral page for this self-contained document. */
body { color: #182338; background: #fff; }

.badge { width: 10rem; height: 10rem; display: grid; place-items: center; background: #1d4ed8; color: white; font: bold 2rem sans-serif; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
  1. Expected result: A blue hexagonal badge displays CSS in its center.
  2. Percentage coordinates scale with the reference box.
  3. The surrounding paragraph is laid out relative to the original box rather than the clipped silhouette.
HTML used by this example

<div class="badge">CSS</div><p>The badge still occupies its rectangular layout box.</p>

Best practices

  • Avoid clipping important text, focus rings, or touch targets.
  • Provide a usable rectangular fallback for older engines.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading