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
More CSS Tips
- A fancy title divider II Use clip-path and border-image to create a fancy title divider.
- A fancy title divider Use background and border-image to create a fancy title divider.
- A CSS-only Speech Bubble Use CSS mask to create a speach bubble easy to adjust.
- Custom dashed border Use gradient and CSS mask to create a dashed border.