Donaldson R F CSS Clip-Path Generator
Cut any element into a shape — pick a ready-made one or drag the points of your own polygon — and copy the CSS.
Drag the round handles to reshape the polygon. Double-click the preview to add a point; double-click a handle to remove it.
About clip-path
The clip-path property hides everything outside a shape. polygon() takes a list of corner points as percentages of the element's box (x y), so shapes scale with the element; circle() and ellipse() take a radius and a centre; inset() cuts a rectangle with optional rounded corners. It works on images, buttons, headings and any block, and needs no image editing. The clipped area also stops receiving clicks, and shadows or borders are clipped too — wrap the element in another one if you need a shadow around the shape. -webkit-clip-path is included for older Safari versions.