CSS clip-path: Break Out of the Box
Use clip-path to create non-rectangular layouts by defining a visible region, like a cookie cutter for your elements. It's perfect for complex UI shapes like chevrons or circles without extra image files. The footgun: complex shapes have tricky syntax.
Why it exists
Web design is often constrained by rectangular boxes. To create more dynamic, visually interesting layouts with non-rectangular elements, developers historically had to use transparent PNGs or complex SVG masking. clip-path provides a native CSS solution to this problem, allowing for performant and animatable custom shapes directly on HTML elements.
The mental model
Think of clip-path as a stencil or a cookie cutter placed over your element. The element is the dough. Whatever is inside the stencil's cutout is visible; everything outside is hidden. The original element's dimensions and properties are still there, but you're only revealing a specific part of it.
How it works
The clip-path property accepts a shape function or a URL pointing to an SVG <clipPath> element. The most common values are basic shapes. circle() creates a circle. inset() creates an inset rectangle. polygon() is highly flexible, letting you define a custom shape with a series of x/y coordinate pairs. For maximum complexity, you can use path() with SVG path data syntax. The coordinates for these shapes are relative to a reference box, which defaults to the element's border-box.
When to use it
Use clip-path for decorative UI that breaks the grid, such as angled hero section backgrounds, circular or hexagonal avatars, or custom-shaped buttons. Since clip-path is animatable, it's great for creating interesting hover effects or page transitions, like revealing an image with a growing circular clip. It's a lightweight alternative to using image files for simple geometric shapes.
When not to use it
Be cautious when your layout depends on content flowing around the visible part of the clipped element. clip-path only hides parts of the element visually; it does not change the element's underlying rectangular shape in the document flow. Other elements will not wrap around your custom shape. For very complex illustrations that are not just simple shapes on an element, a full SVG might still be a better choice.
One canonical example
To create a diamond shape on a square div, you can use the polygon() function. The coordinates define the four points of the diamond: the top-center, right-center, bottom-center, and left-center of the element. The CSS would be: clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);. This connects the four points, clipping away the corners of the square.
Interview question
When an element has a clip-path applied, how does it interact with the document flow and surrounding elements?
- a.The clipped-out regions become transparent and allow surrounding elements to overlap them without affecting their own layout.
- b.The element's original rectangular box is preserved in the document flow, and surrounding elements behave as if the clipped parts are still present.Correct
- c.It creates a new, non-rectangular content area, and surrounding elements adjust their positions to avoid the clipped regions.
- d.The element's bounding box is redefined to match the custom shape, causing surrounding elements to reflow around the new shape.
Why? this is the answer
The card explicitly states that "clip-path only hides parts of the element visually; it does not change the element's underlying rectangular shape in the document flow. Other elements will not wrap around your custom shape." This means the element continues to occupy its original rectangular space in the layout. Option D describes a common misconception, as clip-path does not alter the element's box model for layout purposes.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #css
- #layout
- #shapes
- #design systems
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles