Shapes Clippath
The CSS clip-path property crops an element into a non-rectangular shape like a circle, polygon, or arrow, while shape-outside lets surrounding text wrap around that shape for magazine-style layouts.
Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.
Part of the free HTML & CSS course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.
By the end of this lesson you'll be able to cut any element into a circle, hexagon or arrow with clip-path , animate those clips for reveal effects, wrap paragraphs around shapes with shape-outside , and fade an image edge with a CSS mask — the toolkit behind every "how did they do that?" layout.
clip-path is a cookie cutter. You press a shaped cutter onto a sheet of dough and only the dough inside the cutter stays — but the whole sheet is still on the table underneath. The element keeps its full rectangle for layout and clicks; you've only changed what shows through .
shape-outside is a stone dropped in a stream. The water (your text) doesn't flow through the stone — it bends and hugs the outline as it passes. And a mask is a stencil with a gradient : where the stencil is solid the paint lands fully, where it fades the paint fades too, so you can dissolve an edge into nothing.
clip-path defines a clipping region: everything inside the shape is visible, everything outside is hidden (but still in the DOM). You build that region with a shape function. Four cover almost everything:
Run the worked example. Each tile is an ordinary div with a background colour — only the clip-path line differs. Read the comments to see how each function maps to a shape.
polygon() is the one you'll reach for most. Each point is an x% y% pair measured from the element's own box: 0% 0% is the top-left corner, 100% 100% the bottom-right. List the points in order around the outline — walk the perimeter clockwise — and the browser joins them with straight lines.
That single rule gives you hexagons, stars, arrows and diagonal section edges. The worked example below annotates a hexagon point by point so you can see the walk.
By default, text wraps around the rectangular box of a floated element, even if the element looks round. shape-outside changes the wrapping contour to a shape you choose, so paragraphs hug a circle or a pentagon like a magazine layout.
Three things must be true for it to work: the element is floated , it has an explicit width and height , and the text is a sibling after it. Use the same shape for shape-outside (the wrap) and clip-path or border-radius (the look) so they line up.
Because clip-path is animatable, you can grow a circle from nothing to reveal an image, or morph one polygon into another. The catch: the browser can only tween between two values that use the same function with the same number of points . A circle() animates to another circle() ; a 4-point polygon morphs to another 4-point polygon. Mismatched counts jump instantly instead of sliding.
Where clip-path makes a hard edge, mask-image can make a soft one. A mask uses an image (often a gradient) as an alpha stencil: where the mask is opaque the element shows, where it's transparent the element fades out. A linear-gradient mask dissolves an edge into nothing — perfect for fading the bottom of a hero image.
Combine these tricks for the layouts people notice: a diagonal clip-path section edge, plus a masked fade. The example shows both.
Fill in the blanks marked ___ to clip one tile into a hexagon and another into an inset rounded rectangle. Run it and check the expected result in the comments.
One float needs shape-outside so the text hugs the circle, and one box needs a hover transition so its circle clip grows. Fill in the blanks, then verify against the comments.
Support is faded now — only an outline is given. Build a hero section with a slanted bottom edge. Lean on sections 1, 2 and 5 if you get stuck.
You can now cut, wrap and fade elements into shapes most sites never attempt. The essentials:
Next up: Filters & Blend Modes , where you'll blur, tint and blend layers for even richer visual effects.
Practice quiz
What does the clip-path property do to an element?
- Deletes part of it from the DOM
- Changes its background colour
- Crops it to a shape — everything inside the shape shows, everything outside is hidden
- Moves it off-screen
Answer: Crops it to a shape — everything inside the shape shows, everything outside is hidden. clip-path defines a clipping region: the visible part is whatever falls inside the shape; the rest is hidden but still in the DOM.
How is each point in polygon() written?
- As an x% y% pair relative to the element's own box
- As an angle in degrees
- As pixel offsets from the center
- As a single radius value
Answer: As an x% y% pair relative to the element's own box. Each polygon() point is an x y pair in percentages of the element's box: 0% 0% is top-left, 100% 100% is bottom-right.
What does clip-path: polygon(50% 0%, 0% 100%, 100% 100%) produce?
- A circle
- A square
- A hexagon
- A triangle (top-center, bottom-left, bottom-right)
Answer: A triangle (top-center, bottom-left, bottom-right). Three points — top-center, bottom-left, bottom-right — joined by straight lines form a triangle.
Why must polygon() points be listed in order around the outline?
- For performance
- Jumping between non-adjacent points makes the edges cross, producing a tangled shape
- Browsers require alphabetical order
- Order doesn't matter
Answer: Jumping between non-adjacent points makes the edges cross, producing a tangled shape. The browser joins points in the order given, so walk the perimeter clockwise (or counter-clockwise); jumping around creates crossed, tangled edges.
Why is a clipped element's hidden area still clickable?
- clip-path is purely visual — the element keeps its full rectangular box for layout and hit-testing
- A browser bug
- Because of z-index
- It isn't clickable
Answer: clip-path is purely visual — the element keeps its full rectangular box for layout and hit-testing. clip-path only changes what's visible, not the geometry. The full rectangle still registers clicks; add pointer-events: none to stop the invisible area catching them.
Why might a clip-path transition jump instantly instead of animating smoothly?
- The duration is too short
- clip-path can't be animated
- The two shapes use different functions or different numbers of points, so the browser can't interpolate
- The element has no background
Answer: The two shapes use different functions or different numbers of points, so the browser can't interpolate. Interpolation needs the same shape function and the same point count on both sides — a circle() to circle() or a 4-point polygon to another 4-point polygon.
What three conditions must be true for shape-outside to take effect?
- Any element, any size, any position
- The element must be floated, have an explicit width and height, and the text must be a sibling after it
- It must be position: absolute
- It only needs a background image
Answer: The element must be floated, have an explicit width and height, and the text must be a sibling after it. shape-outside only works on a floated element with an explicit size, with the wrapping text as a following sibling; otherwise text wraps the plain rectangle.
What is the key difference between clip-path and shape-outside?
- They are the same property
- shape-outside crops the element
- clip-path only works on images
- clip-path changes the element's own visible shape; shape-outside changes how nearby text wraps around it
Answer: clip-path changes the element's own visible shape; shape-outside changes how nearby text wraps around it. clip-path cuts the element's appearance; shape-outside controls the contour that surrounding text flows around. They're independent and often paired.
How does a gradient mask-image fade an element's edge?
- By blurring the pixels
- It acts as an alpha stencil — where the mask is opaque the element shows, where transparent it fades out
- By lowering the element's opacity uniformly
- By cropping it to a circle
Answer: It acts as an alpha stencil — where the mask is opaque the element shows, where transparent it fades out. mask-image uses the image's alpha: a linear-gradient from black to transparent dissolves that edge into nothing, e.g. fading the bottom of a hero image.
Which clip-path polygon slants only the BOTTOM edge of a section?
- polygon(50% 0%, 0% 100%, 100% 100%)
- circle(50%)
- polygon(0 0, 100% 0, 100% 85%, 0 100%)
- inset(10%)
Answer: polygon(0 0, 100% 0, 100% 85%, 0 100%). Keeping the top two points flat (0 0 and 100% 0) and offsetting the bottom two (100% 85% vs 0 100%) cuts the bottom edge on a diagonal.