Dynamic Node Connection (CSS-only Diagram) II
Extending the previous implementation to add more connection types. This time, the connectors will stick to the specified sides, regardless of the node's position. Another cool demo made possible with anchor positioning, border-shape, shape(), container queries, if(), and more!
Drag the nodes in the demo below and see the magic in play!
⚠️ Chromium-only for now ⚠️
See the Pen CSS-only diagram with dynamic connections II by Temani Afif (@t_afif) on CodePen.
I used three types of connections.
A left-to-right connection:
See the Pen left-to-right connection by Temani Afif (@t_afif) on CodePen.
A left-to-left connection:
See the Pen Left-to-left connection by Temani Afif (@t_afif) on CodePen.
A right-to-right connection:
See the Pen right-to-right connection by Temani Afif (@t_afif) on CodePen.
The possibilities are endless. Stay tuned for more CSS-only diagrams!
More CSS Tips
- Hover Proximity with Scroll-Driven Animations A fancy hover effect in a 2D responsive grid powered by modern CSS.
- Get Grid Information using pure CSS With a few lines of code, you can get the number of columns, number of rows, and item coordinates.