CSS

CSS Clip-path Builder

Shape a local drawing with editable geometry. Keep every coordinate accessible through labelled numeric controls.

Result

Clipping study

Original local drawing. Only the visible region changes.

polygon(nonzero, 20% 0%, 100% 0%, 80% 100%, 0% 100%) border-box

Preview dimensions stay exact. Scroll the preview on narrow screens. No source pixels are cropped from a file.

320 × 240px border box, polygon coordinates in percent.

CSS 

.clipped-element {
  box-sizing: border-box;
  width: 320px;
  height: 240px;
  clip-path: polygon(nonzero, 20% 0%, 100% 0%, 80% 100%, 0% 100%) border-box;
}

Define the visible part of an element

  1. Choose a basic shape and coordinate unit.
  2. Set the reference box and geometry. A polygon needs at least three ordered points.
  3. Inspect the local drawing, then copy the CSS onto your own element.

How do percentages and pixels differ?

Coordinates and ellipse radii use the reference box width for X and height for Y. A circle’s percentage radius uses the normalized diagonal: the box diagonal divided by the square root of two. On a 320 × 240px box, a 50% circle radius is about 141.421px. Pixel values keep a fixed CSS length. Switching units here reinterprets the existing numbers; it does not convert them.

Clipping, bounds and layout

The export explicitly uses border-box and includes the preview dimensions. Clip-path changes painting, not the element’s layout footprint or text flow around it. Points outside the box do not add new content. An empty or very small shape can hide the entire drawing. Inset edge pairs must fit within the box in this builder; equal opposing edges can collapse the visible area. Polygon intersections use the chosen nonzero or even-odd fill rule.

Scope and compatibility

This builder accepts circle, ellipse, inset and polygons with 3 to 12 points. Geometry is bounded to 0–100% or 0–600px; box dimensions are 120–600px wide and 120–500px high. Values round to three decimals. Custom paths, SVG URL references, curved polygons and mixed units are outside its scope. The preview uses your browser’s CSS rendering; test the exported shape in your target browsers. The original drawing is a preview asset and is not included in the CSS export.

References

See MDN clip-path and the circle() reference .

Related Tools