Post

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 🪄

9/9/26, 11:09 am8 reposts33 likes

CSS by T. Afif

@css-only.dev

9 Sept

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()...

Sam Littlefair

@littlefair.ca

9 Sept

This is so awesome. Do you think it could potential be a Mermaid replacement?

CSS by T. Afif

@css-only.dev

9 Sept

I don't know what Mermaid is

Sam Littlefair

@littlefair.ca

9 Sept

It's a JavaScript diagramming library, which has been accepted as a de facto standard. For instance, many markdown tools parse Mermaid by default. It's good for making flowcharts and whatnot, but I think it's a bloated package and it's challenging to style.

Caesar

@caesar.dev

9 Sept

🤯