CSS clip-path

Previous Next

Demo of the different values of the clip-path property.

Click the property values below to see the result:

clip-path: circle(40%);
clip-path: circle(20%);
clip-path: ellipse(25% 40% at 50% 50%);
clip-path: ellipse(25% 25% at 50% 50%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: inset(5% 20% 15% 10%);
See how different clip-path values will affect this DIV element.
See how different clip-path values will affect this DIV element.
See how different clip-path values will affect this DIV element.
See how different clip-path values will affect this DIV element.
See how different clip-path values will affect this DIV element.
See how different clip-path values will affect this DIV element.
See how different clip-path values will affect this DIV element.

Play more with the code in our Tryit yourself editor: Try it Yourself ❯