Clip-path Generator

CSS clip-path visual editor

Shape Type

Sides: 5

Generated CSS

clip-path: polygon(50% 0%, 100% 100%, 0% 100%);

Clip-path Usage Guide

Shape Descriptions

circle() — Circle clipping, parameters: radius at center
ellipse() — Ellipse clipping, parameters: horizontal/vertical radius
polygon() — Polygon clipping, composed of multiple coordinate points
inset() — Inset rectangle clipping, supports rounded corners

Use Cases

Creative image cropping effects
Card/button shape design
CSS animation transition effects
Responsive layout masking