Clip-path Editor

clip-path crops an element to an arbitrary shape without touching its layout box. It accepts several value types: basic shape functions like circle(), ellipse(), inset(), and polygon(); a URL reference to an inline SVG <clipPath>; and (in newer browsers) a path() function that takes raw SVG path data.

Polygon is usually what you want

polygon() lets you list any number of points as percentages or lengths, so you can build triangles, chevrons, ribbons, and diagonal section dividers directly in CSS. Because percentages are relative to the element, the shape scales with the box — a polygon(0 0, 100% 0, 100% 80%, 0 100%) angled section divider stays proportional on any screen size.

Things to watch out for

• Clipped elements still capture pointer events only inside the visible region by default. Use pointer-events: none on the hidden regions if that bites.
• You can animate between two polygon() values only if they have the same number of points — the browser interpolates point-by-point.
• Shadows and outlines don't follow the clipped edge. If you need a shadow around the clipped shape, apply filter: drop-shadow() to a parent element instead ofbox-shadow on the clipped one.
• For pixel-perfect control over complex curves, design the path in Figma or Illustrator and export the SVG path data.