Clip Path

Create polygon clip-paths visually. Drag points to reshape and copy the CSS.

4 points

Editor

Click and drag points to reshape. Click anywhere on canvas to add a point on the nearest edge. Press Delete/Backspace to remove selected point (minimum 3 points required).

Points

#	X %	Y %
1
2
3
4

Presets

Live Preview

Preview

Generated CSS

.element {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}