Clip Path Editor
Start from a common shape or build your own: drag points, add and remove them, nudge with the keyboard. Copy the clip-path as CSS or as a Tailwind arbitrary value.
Shapes
Drag the handles, or focus one and use the arrow keys — Shift for bigger steps.
Point 1 of 6
25% 0%
New points land on the midpoint of the next edge.
Output
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);Frequently asked
Does clip-path affect layout?
No. The element keeps its full box for layout and hit-testing purposes — only the painting is clipped. Neighbouring content will not flow into the cut-away area, so an angled edge still reserves the whole rectangle.
Are clipped areas still clickable?
No, and that is useful. Pointer events are clipped along with the paint, so a triangular button only responds inside the triangle. It also means a large clipped element cannot accidentally block clicks in its invisible corners.
Why percentages rather than pixels?
Percentages scale with the element, so one shape works at any size — which is what you want for responsive components. Pixels are the right choice only when the shape must stay a fixed size regardless of its container.
Can I animate between shapes?
Yes, as long as both polygons have the same number of points. The browser interpolates point by point, so a triangle cannot morph into a hexagon without adding matching points to both shapes first.
What about accessibility?
Clipping is purely visual, so text inside a clipped element is still read normally — including any part that is visually cut off. If content disappears under the clip, it is still announced, which is usually a bug rather than a feature.