Clip-path — Allowed

This gauge covers Chapter 17: shaping visible boxes with CSS clip-path.

Learning goal

Use clip-path to reveal only part of an element with basic shape functions, without changing layout size, and keep important content reachable.

Inherited tools

Everything allowed through ./phase2-allowed.html remains available for page chrome (spacing, colour, borders, basic typography).

img may appear so learners can clip a photograph as well as a solid box.

New CSS

• clip-path
• Shape functions:
• circle(...)
• ellipse(...)
• inset(...)
• polygon(...)
• clip-path: none to clear a clip
• object-fit: cover when a clipped photo fills a fixed slot
• aspect-ratio for responsive square photo slots

Learning rules

1. clip-path hides parts of an element visually. The element's layout box (space it occupies) does not shrink to the visible shape.
2. Prefer basic shapes (circle, ellipse, inset, polygon) in this chapter. Do not use SVG path() or external SVG url(#id) references yet.
3. Percentages in shape arguments are relative to the element's own box.
4. Do not put required text, controls, or instructions only in a clipped-away region. Clipped content can be hard or impossible to perceive.
5. When clipping a photo, keep a meaningful alt on the img. The clip is presentation; the image meaning stays in HTML.
6. Combine one clear shape per demo. Stacking many polygons on one lesson page makes the cascade harder to follow.
7. This chapter is about clip-path, not decorative clipart assets and not overflow: hidden (a related but different tool).

Pages

• 01-basic-shapes.html — circle, ellipse, inset
• 02-polygon.html — polygon(...) custom silhouettes
• 03-clip-image.html — clip a photograph
• 04-shaped-cards.html — combine shapes on cards