A Foldable Zig-Zag Connector Using Modern CSS
In a previous post, we created a fancy connector where a straight line bends (or stretches) based on the distance between the connected elements. This time, let's try a foldable zig-zag connector.
Drag the circles, but be careful; the connector isn't stretchy and can break. Don't pull the circles too far!
⚠️ Chromium-only for now ⚠️
See the Pen Foldable Zig-Zag Connetor (drag the circles!) by Temani Afif (@t_afif) on CodePen.
Maybe a double Zig-Zag connector is more robust?
See the Pen Double Foldable Zig-Zag Connector (drag the circles!) by Temani Afif (@t_afif) on CodePen.
Still not. Stay tuned for more reliable connectors.
More CSS Tips
- Input Range Slider with Custom Shapes Using modern CSS features to apply fancy shapes to native range sliders.
- Random Wavy Dividers Combining shape() and random() to create fancy wavy dividers.