CSS Click Chart

Clip Path

Lets you define a "clipping path", which is a region of an element where everything on the inside of the region is visible, whereas the remainder is "clipped" out (not visible).


Clipping Shape: the clip-path property on W3C

Example Code

Live Demonstration

The rectangular image below is "clipped" using the circle() basic shape. Click and hold on the image to view the original.


Browser Support

Can I Use css-clip-path? Data on support for the clip-path feature across the major browsers from caniuse.com.

Tools / Polyfills

Tutorials / Articles