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