Clip-Path Maker
Drag the handles to create custom shapes.
Presets
CSS Output
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
Understanding Clip-Path
What is it?
The CSS clip-path property allows you to specify a specific region of an element to display, while hiding the rest. The polygon() function lets you create custom shapes by defining X and Y coordinates (0% to 100%).
Performance
Using clip-path is much more performant than using heavy images (PNGs) with transparency. It is rendered by the browser's GPU and allows for fluid animations and responsive resizing.
Advertisement