CSS Clip-Path Generator

Drag polygon handles to create clip-path shapes. Presets: triangle, hexagon, star.

Drag handles to edit shape

Preview

Clipped element

CSS output

clip-path: polygon(50.0% 0.0%, 100.0% 100.0%, 0.0% 100.0%);
-webkit-clip-path: polygon(50.0% 0.0%, 100.0% 100.0%, 0.0% 100.0%);