Chapter 17 — Clip-path

Shape what you see with circle, ellipse, inset, and polygon without changing layout size.

New concepts

The clip-path property, basic shape functions, clipping photographs, and keeping text inside the visible region.

Read the Clip-path gauge

What changes after CSS Variables?

Earlier chapters style full rectangular boxes. This chapter hides parts of an element’s paint with a geometric mask while the layout box stays the same size.

overflow: hidden and border-radius remain useful; clip-path unlocks non-rectangular silhouettes.

Lessons

  1. 1. Basic shapes — circle, ellipse, inset
  2. 2. Custom silhouettes with polygon
  3. 3. Clip a photograph
  4. 4. Shaped content cards

Checkpoint

Create three cards or swatches that use at least two different shape functions (for example circle and polygon). Clip one photograph. Confirm all text remains inside the visible region and that layout space still matches the unclipped box.