Question 1

What is clip-path in CSS?

Accepted Answer

clip-path crops an element to a custom shape. Use polygon() to define points as percentages, or circle(), ellipse() and inset() for curved and rectangular shapes. The cropped area becomes transparent.

Question 2

What is the syntax for clip-path polygon?

Accepted Answer

The syntax is clip-path: polygon(x1 y1, x2 y2, x3 y3, ...). Each value is a percentage of the element width and height. For example polygon(50% 0%, 100% 100%, 0% 100%) creates a triangle.

Question 3

Is clip-path supported in all browsers?

Accepted Answer

Yes. clip-path is supported in all modern browsers including Chrome, Firefox, Safari and Edge without vendor prefixes. Internet Explorer 11 and older browsers do not support it.

Question 4

Can I animate clip-path?

Accepted Answer

Yes. clip-path animates smoothly with CSS transitions and keyframe animations as long as both states have the same number of polygon points. This is great for hover effects, reveal animations and morphing shapes.