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.
.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
- The future of hexagon shapes A new way to easily create hexagon shapes using corner-shape.
- Safe align your content Learn about the keyword "safe" and how to use it.