CSS Clip-Path Polígono

CSS clip-path polygon(): cutting custom shapes with vertices

The polygon() function inside clip-path defines an arbitrary shape from a sequence of vertices: clip-path: polygon(x1 y1, x2 y2, x3 y3, ...). Coordinates may be percentages (relative to the element box) or absolute units like px. The browser draws straight segments between consecutive points and automatically closes the path, hiding any pixel outside the region. With just one declaration you replace SVG masks, image clipping in Photoshop or extra DOM wrappers.

Common shapes and vertex counts

• Triangle: 3 points — polygon(50% 0, 100% 100%, 0 100%).
• Parallelogram / chevron: 4-5 points with skewed edges, perfect for buttons and ribbons.
• Hexagon: 6 points at 60° intervals starting from 0°.
• Octagon: 8 points at 45° apart — classic stop-sign silhouette.
• Star: 10 points alternating outer/inner radius (5-point star).

Math: converting angles to coordinates

For any regular polygon with center at (50%, 50%) and radius r, each vertex sits at angle θ from horizontal:

x = 50% + r * cos(θ)
y = 50% + r * sin(θ)

// Hexagon (6 vertices, step 60°, starting at -90°)
polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)

Start at θ = -90° so the first vertex points up. For an N-sided polygon the angular step is 360° / N.

Animation rules and performance

clip-path is animatable, but only between polygons with the same vertex count. To morph from a triangle into a square, add a degenerated point on the triangle so both shapes have four vertices. Combine with transform: rotate() or scale() for richer transitions — the clip lives on a GPU-composited layer, so animations stay buttery even on mid-range mobile. There are no rounded corners and no curves; for those use path() with full SVG syntax.

Use cases and tooling

• Tilted dividers between hero and body sections without SVG wrappers.
• Custom buttons (chevron, ribbon, badge) without extra DOM.
• Hexagonal avatars and image masks for galleries.
• Decorative tooltips with arrow tails baked into the clip.

The most popular visual editor is Clippy (bennettfeely.com/clippy) — drag the vertices and copy the CSS. Browser support is excellent (Chrome 55+, Firefox 54+, Safari 9.1+), so no polyfill is required. The future shape() function (CSS Shapes 2 draft) promises a friendlier syntax with mixed units.

FAQ

Can I animate between two different polygons? Yes, as long as both lists have the same number of vertices. Browsers interpolate each point linearly. If counts differ, pad the smaller polygon with duplicate points (degenerated edges) to keep them in sync.

How do I create rounded corners on a polygon? You cannot — polygon() only draws straight segments. For curves use clip-path: path("...") with full SVG path syntax, including Bézier curves and arcs.

Polygon CSS or SVG <polygon>? CSS clip-path integrates with any HTML element — keeps text selectable and CSS hover states. SVG is more flexible for very complex shapes and curves, but adds DOM nodes. For most landing-page decorations, clip-path wins on simplicity.

Does mixing px and % work? Yes — polygon(20px 0, 100% 100%, 0 100%) is valid. Percentages scale with the box; pixels stay fixed. Useful for keeping a chevron tip at a constant 20 px height while the element width changes.