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.

See the Pen Single Div Speak & Spell (Has Sound) by Dan Wilson (@danwilson) on CodePen.

Getting a single cutout shape 

With 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.

div {
  clip-path: polygon(
    50% 0%,
    0% 100%,
    100% 100%
  )
}

To instead cut out a triangle on the inside, we need our clip path to:

  1. Outline the full element
  2. Go to the starting point for the cutout shape
  3. Make the cutout shape
  4. Close the cutout shape by confirming you connected back to your starting point

See the Pen Clip Path Cutouts by Dan Wilson (@danwilson) on CodePen. 

.inside-cutout {
  clip-path: polygon(
    evenodd,
    /*surround element first*/
    0% 0%,
    0% 100%,
    100% 100%,
    100% 0%,
    0% 0%,
    
    /* 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.

Nesting cutouts 

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.

See the Pen Nested Pentagons by Dan Wilson (@danwilson) on CodePen.

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.

See the Pen Curved Cutouts with Clip Paths & CSS Trig Functions by Dan Wilson (@danwilson) on CodePen.

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.