The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

240 Chapter 18

If we combine these options as shown in the following listing, we would

create a clip path 10px from the top left of the element it’s set on, with a

width of 50 percent, a height of 100px, and corners with a radius of 20px on

both axes. Figure 18-13 shows what this would look like.

E { -webkit-clip-path: rectangle(10px, 10px, 50%, 100px, 20px); }

Figure 18-13: A rectangle made with the rectangle() function of

-webkit-clip-path

Animating Clip Paths

Because clip paths are defined using coordinates, animating them to create

impressive effects is easy. For example, you can take the triangle polygon

defined in the previous section and transition it on hover:

E {

clip-path: polygon(0% 0%, 0% 100%, 100% 0%);

transition: clip-path 1s;

}

E:hover { clip-path: polygon(100% 100%, 0% 100%, 100% 0%); }

In this animation, two points of the triangle stay in the same position,

while the third switches to the corner diagonally opposite. This is animated

with a transition, causing the effect you see in example file 18-d.

Clip Paths in SVG

You can also create clip paths in SVG and apply them to an element using

CSS. To do so, you first define your clip path markup and then assign it a

unique ID. For example, the following listing creates a circular clip path

using the clipPath element at the center of the element, with a radius half

the width and height. It has an ID of clipping.