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

236 Chapter 18

The shape can be one of four basic types, each of which is represented

by a function: circle(), ellipse(), inset() (for rectangles), and polygon().

Each function takes a number of arguments, which define the clip path.

For example, to create a circle, you supply three arguments to the circle()

function, using a syntax like that for radial gradients (see Chapter 11):

E { clip-path: circle(r at cx cy); }

The r represents the radius of the circle, and cx and cy are the coordi-

nates of its center. So to clip an element to a 100px circle positioned at the

center of the target, you use these values:

E { clip-path: circle(100px at 50% 50%); }

The ellipse() function is very similar, requiring only an extra argument

to set the radii of the ellipse:

E { clip-path: ellipse(rx ry at cx cy); }

Here rx is used to represent the x-axis of the radius, and ry the y-axis.

To create an ellipse with a radius of 50px and 100px, again at the center of

the target, you use these values:

E { clip-path: ellipse(50px 100px at 50% 50%); }

To see how these appear in practice, take a look at Figure 18-9. The

example on the left uses the circle() function with the values used earlier,

and on the right, ellipse(), also with the values used earlier.

Figure 18-9: Function values for the clip-path property: circle() (left) and ellipse() (right)

As mentioned earlier, the inset() function is used to create a rectangle

that is inset from the border of the element to which it is applied. It can

accept up to 12 (!) arguments. The first four arguments set the distance that

each side of the rectangle is offset—just like the border-image-slice property