How to Create a CSS Clip-Path Shape: Step-by-Step Guide

Step-by-Step

1. Choose a shape type — polygon, circle, ellipse, or a preset (hexagon, chevron, triangle, and similar common shapes).
2. Adjust the shape visually — drag points for a polygon, or adjust radius and position for a circle or ellipse.
3. Preview against your actual content if the tool supports it, so you can see how the shape interacts with real text or an image.
4. Copy the generated CSS.

Applying It

.hero-image {
  width: 400px;
  height: 300px;
  clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
}

Apply clip-path directly to any element with a defined size — most commonly an image or a colored div. The element's actual content (an image, a background color, text) shows through wherever the shape allows, and is hidden everywhere else.

A Note on Percentages

Percentage-based coordinates scale with the element's own dimensions — a shape defined in percentages stays proportionally the same relative to its container, even if that container resizes. If the element's aspect ratio changes significantly, though, a shape like a diamond can visually stretch into an elongated rhombus rather than staying perfectly symmetrical, since the percentages are relative to width and height independently.