CSS clip-path

The clip-path property allows you to "clip" an element with a shape. Think of clipping just like drawing a shape on a piece of paper and then cutting around it. This shape can be something simple like an ellipse, something more complicated such as a polygon, or something more complex still such as a shape defined by an inline SVG path. If you want to view each of these on a page, check out example-07_09 in the download code.

clip-path with url

You can use the path of an inline SVG like this:

clip-path: url(#myPath);

If the term "inline SVG" doesn't make much sense, don't worry about that for now. Come back here once you have read the next chapter on SVG.

CSS basic shapes

You can use clip-path with any of the CSS basic shapes. These are inset, circle, ellipse, and polygon, as described here: https://www.w3.org/TR/css-shapes-1/#supported-basic-shapes.

Let's take a look at how we would write each...