CSS Tip

Invert CSS Shapes using shape()

Do you want to invert a shape created using clip-path: shape()? With a simple code, you can have both the main shape and its cut-out version.

CSS-only Cut-out shapes using shape()

.shape {
  /* You add "evenodd" at the start and "var(--i,)" at the end */
  clip-path: shape(evenodd from .... var(--i,));
}
.invert { /* by adding the "invert" class, the shape is inverted! */
  --i:,move to 0 0, hline to 100%, vline to 100%, hline to 0;
}

See the Pen Inverting shapes using shape() by Temani Afif (@t_afif) on CodePen.

We can add an extra variable and control the space around the shape when inverted:

.shape {
  clip-path: shape(evenodd from ... var(--i,)) content-box; /* content-box at the end */
}
.invert {
  --d: 20px; /* this will control the space around the inverted shape */
  padding: var(--d);
  --i: ,move to calc(-1*var(--d)) calc(-1*var(--d)),
        hline to calc(100% + var(--d)),
        vline to calc(100% + var(--d)),
        hline to calc(-1*var(--d));
  box-sizing: content-box;
}

See the Pen Inverting shapes using shape() by Temani Afif (@t_afif) on CodePen.

If you want to do the same with clip-path: polygon(), check this: Cut-out shapes using clip-path

More CSS Tips