Cutouts with Clip Paths
Clip paths (and more generally, the shape building functions offered by CSS Shapes) provide mechanisms to turn our rectangular elements into other basic shapes.
With a little extra planning, we can also use clip paths to perform cutouts inside a shape, as seen in this example. The entire Speak and Spell device is made within a single div using (a lot of) box shadows and background gradients... and one clip path to cut out space for the handle. This allows the background of the webpage to be seen from within the element.
Getting a single cutout shape
clip-path: polygon() we can cut an element to any arbitrary polygon. For example, we can turn a rectangular
div into a triangle by specifying three points (vertices) for our polygon.
To instead cut out a triangle on the inside, we need our clip path to:
- Outline the full element
- Go to the starting point for the cutout shape
- Make the cutout shape
- Close the cutout shape by confirming you connected back to your starting point
/*surround element first*/
/* cut interior triangle */
50% 5%, /* point 1: near the top center */
5% 95%, /* point 2: near the bottom left corner */
95% 95%, /* point 3: near the bottom right corner */
50% 5% /* connect back to point 1 of triangle */
This polygon also uses a fill rule to the clip path, by setting the first parameter on the polygon to
evenodd. This setting allows us to make cuts inside other shapes.
We can effectively nesting our shapes multiple times if we keep making successive cuts into our cutout. With
evenodd as our fill rule, we can alternate between clipped and non-clipped areas. The secret is to always start at a consistant point (start a shape, make the shape, close the shape by connecting to the start, and then moving the next point into the inside of the shape), we can create nested clip paths.
By also using CSS Custom Properties, we can create straightforward animations by changing the points. This example additionally uses CSS Trigonometric functions, so by only changing a set of radius custom properties representing each pentagon’s dimensions, we can alternate between a nested collection of pentagons to a fully filled pentagon on hover.
Cutting out multiple shapes and curves
With trigonometric functions in CSS we can also [introduce curves]](/posts/css-shapes-with-trig-functions) beyond basic circles and ellipses. These approaches can be applied on the inside of a shape as well (as in our initial Speak and Spell example).
We can make a cutout smiley face by surrounding our element fully, entering inside to make one eye, connecting to a second eye, connecting to a mouth, and connecting back to our initial entry point. When dealing with multiple shapes the biggest concerns are making sure you close each shape and connect back along the same line you used to move to the new shape.
When dealing with very long polygon definitions, it can be hard to figure out where specifically an error is when things are not lining up as expected. Take it step by step, and isolate it in a tool that helps with reloading on change (like CodePen) to quickly add or remove points and see the changes in real time.