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

238 Chapter 18

The triangle’s points are at the left top, left bottom, and right top of the

target element. You can see how this is clipped in Figure 18-11.

Figure 18-11: A triangular clip path made with the polygon() function

noTe Clipping an element only changes its visual appearance—the dimensions and box

model of the element that’s clipped will be unmodified. For a suggestion of how this

may change in the future, see “Shapes” on page 246.

Implementation of clip-path in Safari

The clip-path property was implemented in Safari 7, with a vendor prefix,

but using a now-outdated version of the syntax (the updated syntax was

implemented in Safari 8). The polygon() function works in the same way,

but the others are slightly different; for example, the circle() function looks

slightly different, requiring three comma-separated arguments:

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

Similarly, the ellipse() function accepts four arguments:

E { -webkit-clip-path: circle(cx, cy, rx, ry); }

The inset() function is known as inset-rectangle(), and it requires a

minimum of four comma-separated values to represent the offset distances:

E { -webkit-clip-path: inset-rectangle(o1, o2, o3, o4); }