Post

CSS by T. Afif
@css-only.dev

Ready for another CSS-only diagram? This time, I am trying another connector type. It sticks to the selected sides, regardless of the node's position. css-tip.com/node-connect... Look how the lines get distorted! 👀 Another cool demo powered by border-shape, anchor position, and more!

CSS by T. Afif@css-only.dev

A diagram with various nodes and connectors? Yes, doable with pure CSS. Another demo powered by modern features! css-tip.com/node-connect... Regardless of the node's position, the connectors will adjust their shape and position for optimal connection 👀 Drag the elements and see the magic 🪄

CSS by T. Afif
@css-only.dev

If you want such demo to be well supported, give your vote 👇

CSS by T. Afif@css-only.dev

Go vote for the border-shape feature. It should be part of Interop 2027! I have a lot of cool demos waiting for better browser support (that I will share anyway in 2026 😅) github.com/web-platform...

github.comCSS ` border-shape` · Issue #1371 · web-platform-tests/interopDescription CSS border-shape (CSS Borders and Box Decorations Module Level 4) lets authors define an element’s border geometry using values (circle(), ellipse(), polygon(), inset(), shape(), path()...

1 repost0 likes

No replies yet.