Micro Tools
Advertisement

Clip-path maker

Generate clip-path polygon shapes: triangles, stars, arrows, chevrons and regular polygons with any point count. Preview live, then copy the CSS.

Shape controls

Pick a preset or dial a regular polygon with any number of points.

Preview and CSS
Advertisement

How clip-path polygons work

clip-path: polygon() takes a list of x y points as percentages of the element box, and the browser cuts the element to that shape. Anything outside the polygon is hidden but the element still occupies its full box in layout, which is why clip-path is perfect for decorative shapes.

Combining rotation with polygon points

This tool applies rotation as a separate transform so the polygon math stays clean: the points are generated upright, then the whole shape rotates. In your own CSS you can bake rotation into the points or keep the transform, whichever is easier to maintain.

Related tools

Image compressorShrink images to a target size or quality. Compress to exact KB. HEIC to JPG converterConvert iPhone HEIC photos to JPG, right in your browser. WebP converterConvert WebP to PNG or JPG.

Clip-Path Maker FAQs

Can I clip an image with clip-path?
Yes, clip-path works on any element including images and video. Apply the polygon to an img tag and the photo is cut to the shape. Add transition on clip-path for smooth morphing hover effects.
Why is my clipped element invisible?
The polygon points are probably wound in an order that collapses to zero area, or all points sit on one line. Keep points in clockwise order around the shape and make sure they span both x and y.
Does clip-path work on buttons and links?
Yes, and the clickable area follows the clipped shape in modern browsers. That makes clip-path great for arrow-shaped buttons and hexagonal badges that stay fully interactive.
What is the difference between clip-path and border-radius?
Border-radius only rounds corners, it cannot make triangles, stars or arrows. Clip-path draws any polygon, but unlike border-radius it also clips the element content, not just its background.
Is clip-path supported on mobile browsers?
Yes, polygon clip-path is supported in all modern mobile browsers. Very old Android WebViews may need -webkit-clip-path, so include the prefixed version if you target legacy devices.
Advertisement