CSS Click Chart

common stuff
cutting-edge

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).

Specification

Clipping Shape: the clip-path property on W3C

Example Code

.example {
  position: absolute;
  clip-path: circle(15px at 20px 20px);
}

.example2 {
  position: absolute;
  clip-path: padding-box;
}

.example3 {
  position: absolute;
  clip-path: url(#svgPath);
}

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

CSS clip-path maker
Clip Path Generator

Tutorials / Articles

Clipping in CSS and SVG — The clip-path Property and <clipPath> Element
The CSS Clip Property (Deprecated)