-
Book Overview & Buying
-
Table Of Contents
Responsive Web Design with HTML5 and CSS - Third Edition
By :
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.
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.
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...