Clip Path

Create a shape without changing the layout box

The clip-path property controls which part of an element is painted. A polygon can make an angled image, a geometric badge, or a decorative panel while the element still occupies its original rectangular space in the layout. Percentage coordinates scale with the element’s dimensions.

How to use this tool

1. Choose a preset or move the polygon points. Each point has a horizontal and vertical position relative to the element.
2. Check that the points follow the outline in order. Crossing edges can create unexpected areas inside the shape.
3. Copy the clip-path declaration onto your image or decorative container and test both a wide and a narrow aspect ratio.

The first two points keep the top edge flat. The bottom-right point sits at 88% of the height while the bottom-left remains at 100%, producing a sloped bottom edge. The containing layout still uses the original image box.