CSS Tip

Puzzle shapes using CSS mask

Create different kind of puzzle shapes using a few lines of code

CSS-only puzzle shapes

.puzzle {
  --r: 30px;  /* control the circle radius */
  --s: 200px; /* control the main size */

  width: var(--s);
  height: calc(var(--s) + var(--r));
  mask: 
    radial-gradient(var(--r) at 50% calc(100% - var(--r)),#000 calc(100% - 1px),#0000), 
    radial-gradient(var(--r) at right,#0000 calc(100% - 1px),#000) 
     0 0/100% calc(100% - var(--r)) no-repeat;
}

Find more variations here: css-shape.com/puzzle

A demo using the different shapes to create a grid of images

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

More CSS Tips