Skip to main content
CSS Tip

Cut-out shapes using clip-path

A simple code to easily invert any shape created using clip-path: polygon(). An easy way to create Cut-out shapes.

CSS-only Cut-out shapes using clip-path

.shape {
--shape: X0 Y0, X1 Y1, X2 Y2, ... , Xn Yn, X0 Y0; /* the first value is repeated */

/* the size */
width: ...;
aspect-ratio: ...;
/* the main shape */
clip-path: polygon(var(--shape));
}
.shape.invert {
--s: -20px; /* to control the space */
padding: calc(-1*var(--s));
box-sizing: content-box; /* reset the box-sizing */
/* evenodd at the beginning and content-box at the end */
clip-path: polygon(evenodd,var(--s) var(--s),calc(100% - var(--s)) var(--s),calc(100% - var(--s)) calc(100% - var(--s)),var(--s) calc(100% - var(--s)),var(--s) var(--s),var(--shape)) content-box;
}

See the Pen Untitled by Temani Afif (@t_afif) on CodePen.

More detail: verpex.com/blog/website-tips/how-to-create-cut-out-shapes-using-the-clip-path-property


More CSS Tips