CSS workflow
CSS clip-path polygon: coordinates, clipping and focus
A polygon clips an element's painted content, not its layout box. Build a contour visually, then inspect the receiving component at real sizes with real content and keyboard focus.
Content updated: · Maintainer and corrections
Keep coordinates relative to the reference box
In polygon(), each pair is X followed by Y. Percentage X values measure from the left across the reference box's width; Y values measure from the top across its height. For an HTML element, clip-path with a basic shape and no geometry-box uses border-box by default.
A 50% 50% point stays at the center, but the visual shape changes when width and height change. Compare 1:1, 16:9 and 9:16 previews without changing the coordinates. These preview choices do not generate media queries, lock the target element's aspect ratio or guarantee that a copied shape fits its content.
Point order defines the edges
The browser connects points in their listed order and closes the last point back to the first. The generator does not sort points by angle. Reordering points may therefore change the contour or create crossing edges. Inserting a point adds the midpoint of the selected point's following edge, rounded to one decimal place.
Concave and self-intersecting polygons are valid CSS. This editor leaves the default nonzero fill rule intact and delegates rendering to native CSS. Zero signed area does not necessarily mean an invisible self-intersecting shape. A warning appears only when all vertices are collinear or coincident; the declaration remains copyable because its syntax is still valid.
Clipping is paint, not layout or redaction
clip-path limits an element's paint, including backgrounds, descendants and outlines. It does not change the element's inherent geometry or make neighboring content flow around the polygon. Pointer events are not dispatched to clipped-away regions. A non-none clip-path also creates a stacking context.
Do not use clipping to redact private content: the underlying HTML or image still exists. The preview is not a security or accessibility validation. Test text wrapping, zoom, focus states and click targets in the receiving component, not only the decorative sample.
Keep focus and shadows outside the clipped surface
An outline on the clipped element can itself be clipped. Put decorative clipping on an inner surface and keep essential text, controls and a visible focus indicator on an unclipped outer wrapper. The example below is a structure to test, not automatic WCAG compliance.
A box-shadow painted on the same clipped element is clipped too. An outer wrapper can retain a rectangular box shadow, but that shadow does not automatically follow the polygon silhouette. A silhouette-following filter is a different effect and is not generated by this editor. Test keyboard and pointer behavior, forced colors and narrow layouts in your supported browsers.
Know the editor and privacy boundaries
This editor accepts 3–12 vertices, X/Y from 0 to 100%, with up to one decimal place. Blank, non-finite, exponent, out-of-range and unit-bearing values are rejected without silently correcting typed input. These are editor constraints, not limits of polygon() syntax. Pointer movement clamps at the frame; optional 5% snapping applies only to dragging, while arrow keys move by 1% or 10% with Shift.
Invalid fields block the preview, CSS output and copy action until all marked points are corrected. Clipboard failure leaves selectable code for manual copy. Settings stay in the current page's memory: no upload, persistence, URL parameters or input-value analytics. This version does not import CSS, load images, edit circle/ellipse/inset/curves, export SVG or animate shapes. Native rendering may differ slightly across browsers; test your actual component before publishing.
.card { position: relative; isolation: isolate; padding: 2rem; }
.card::before {
content: ''; position: absolute; inset: 0; z-index: -1;
background: #315460;
clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%);
}
.card:focus-visible { outline: 2px solid #315460; outline-offset: 4px; }Data provenance