Blend Modes, Filter Effects, and Masking 237(see Chapter 9). So a single value will set the offset distance equally on all
sides; if two values are supplied, the first will set the top and bottom and the
second the left and right; and so on.
If we were to use all four values, the syntax would look like this:
E { clip-path: inset(o1 o2 o3 o4); }
Each o* represents an offset value (the top, right, bottom and left,
respectively).
In its simplest format, a single value would create four equal offsets, as
in this case, where each offset value is 2em:
E { clip-path: inset(2em); }
You can also round the corners of the clip path, which is where the
remaining arguments come in. Following the round keyword, you can use
syntax identical to that of the border-radius property (see Chapter 9) to
define a radius for each corner—with up to eight values for fine control.
To prevent my having to repeat the explanation of the border-radius short-
hand here, this example shows how you’d set a radius of 20px on each cor-
ner of the inset rectangle defined earlier:
E { clip-path: inset(2em round 20px); }
See the result in Figure 18-10. The example on the left shows a rect-
angle with right-angled corners, and on the right, a rectangle with rounded
corners.
Figure 18-10: The inset() function without (left) and with (right) border radius values
You can use the polygon() function to create more complex clip paths.
This function takes an unlimited number of arguments, in pairs, in a
comma-separated list. Each pair creates a coordinate value, and the full
set of coordinates is used to draw the required clip shape. As a very simple
example, this syntax defines the three points of a triangle:
E { clip-path: polygon(0% 100%, 100% 0%, 0% 0%); }