Overview
A builder for the four basic-shape forms of clip-path: polygon, circle, ellipse and inset. Polygon mode ships seven trigonometrically generated presets including a five-point star, an arrow and a parallelogram; the other three modes expose their radii, centre and edges as percent sliders. The preview clips a gradient block live and the panel copies the finished declaration.
How It Works
Choose a shape from the four buttons. In polygon mode pick a preset such as Triangle, Pentagon, Hexagon, Star, Rhombus, Parallelogram or Arrow Right to load its vertex list. Circle mode gives sliders for radius and centre position, ellipse mode for the two radii around a fixed centre, and inset mode for the four edge insets from 0 to 49 percent. The preview shows the clip applied to a gradient rectangle, and Copy CSS emits clip-path with the shape and its percentage arguments.
Step-by-Step Usage Guide
- Select polygon, circle, ellipse or inset.
- For polygons, load a preset to get a sensible vertex list.
- Tune the sliders for circle, ellipse or inset shapes.
- Copy the clip-path declaration.
Technical Specifications & Standards
Percentage semantics differ per shape and that trips people up. In polygon() each coordinate is measured against the reference box, so 50% 0% is the horizontal middle of the top edge. In circle() a percentage radius resolves using sqrt(width squared plus height squared) divided by sqrt 2, per the basic-shape spec, which makes 50% reach the nearest edge on a square but not on a rectangle. That rule is specific to clip-path: in radial-gradient a circle with a percentage radius is invalid and only ellipses accept percentages, so the two functions are not interchangeable. The presets compute their vertices with cosine and sine around the centre, which is why the pentagon and hexagon land on non-round numbers. Inset sliders cap at 49 percent so the box can never invert. A clip-path also affects pointer hit testing: pixels outside the shape do not receive clicks.
Targeted Use Cases
- Diagonal section dividers cut from full-width hero blocks.
- Hexagonal avatars and badge containers.
- Arrow and speech-bubble shapes without extra elements or images.
- Reveal animations that animate the clip region.
Notes & Gotchas
- Keep polygon vertex counts constant if you plan to animate between shapes; interpolation requires matching vertices.
- Remember percentages track the element size, so a clipped shape distorts if the aspect ratio changes.
- Test keyboard focus outlines, because clipping also clips the outline box.
- Use inset with zero radius when you just need a rectangular crop of an image.
Frequently Asked Questions
How is the circle radius percentage calculated?
A percentage radius resolves against sqrt of width squared plus height squared, divided by sqrt 2. On a square that equals the half-diagonal, so 50% reaches the edges. On rectangles the same percentage falls short of the longer sides.
Can I edit individual polygon vertices?
The current interface switches between the seven presets rather than offering per-vertex dragging. Copy the polygon output and nudge the percentage pairs by hand; each vertex is just an x y pair in percent.
Why is a percentage radius invalid in radial-gradient but fine in clip-path?
They follow different rules. clip-path circle() defines percentage radii against the reference-box diagonal formula, while radial-gradient only permits percentage sizes for ellipses; a circle there needs a length.
Do clicks pass through the clipped-away area?
No. The clipping region also defines the hit area, so elements outside the shape ignore pointer events. That makes clip-path useful for non-rectangular buttons, but it can hide parts of a child you still want clickable.