On Codrops there’s a tutorial on how to create a Cutout Collage Layout using CSS Grid and Clip Path. The result looks quite nice I must say:
What I’m not too excited about in this implementation is the fact that it requires you to manually cut up the image into parts beforehand, even though clip-path
is used later on. I’ve quickly made a pen that uses the one single image, yielding a similar cutout effect.
See the Pen Magazine Cutout by Bramus (@bramus) on CodePen.
I’ve only cut out a few parts, but you get the idea. The parallax part as seen in the original is left as an exercise to you, dear reader 😛
🚧 A big help in creating these cutouts was the Shape Path Editor which you can find in Firefox’ DevTools. Without it such a task would have been really difficult.