Zig-Zag expanding image panels

Build an expanding image panels with Zig-Zag edges

• Minimal HTML
• Works with any number of images
• Optimized with CSS variables

Flexbox Demo #

See the Pen Zig-Zag sliding panels (Flexbox) by Temani Afif (@t_afif) on CodePen.

CSS Grid Demo #

See the Pen Zig-Zag sliding panels (CSS Grid) by Temani Afif (@t_afif) on CodePen.

More detail: css-tricks.com/css-grid-and-custom-shapes-part-2

• Previous CSS Tip
• Next CSS Tip