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.
https://css-tip.com/node-connection-2/
Look how the lines get distorted! 👀
Another cool demo powered by border-shape, anchor position, and more!
#CSS #HTML
CSS by T. Afif :verified:
npub19q…05kmj
2026-09-09 11:09:06 UTC
Author Public Key
npub19q8mse6f2amuz0f88trxh333clfe8x0whv553laqh2ekp76nyy4sy05kmjSeen on
wss://relay.momostr.pinkPublished at
2026-09-09 11:09:06 UTCEvent JSON
{
"id": "cc91e154efc289a9b29e1b601f9d31b8b033e9a36c485b14b5ec47123a8ee603",
"pubkey": "280fb867495777c13d273ac66bc631c7d39399eebb2948ffa0bab360fb53212b",
"created_at": 1788952146,
"kind": 1,
"tags": [
[
"proxy",
"https://front-end.social/@css/117240767898044346",
"web"
],
[
"imeta",
"url https://cdn.masto.host/frontendsocial/media_attachments/files/117/240/756/062/429/798/original/8d0e702aa5642079.mp4",
"m video/mp4"
],
[
"t",
"css"
],
[
"t",
"html"
],
[
"proxy",
"https://front-end.social/users/css/statuses/117240767898044346",
"activitypub"
],
[
"L",
"pink.momostr"
],
[
"l",
"pink.momostr.activitypub:https://front-end.social/users/css/statuses/117240767898044346",
"pink.momostr"
],
[
"-"
]
],
"content": "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.\n\nhttps://css-tip.com/node-connection-2/\n\nLook how the lines get distorted! 👀\n\nAnother cool demo powered by border-shape, anchor position, and more!\n\n#CSS #HTML\nhttps://cdn.masto.host/frontendsocial/media_attachments/files/117/240/756/062/429/798/original/8d0e702aa5642079.mp4\n",
"sig": "35936825f688803e9e9eb2978159fc96a3a9dae16003a218808d078e17e1a0f6e45cc5b6dee434cbd6c3e55e1f41dd891e87eeb3bb272f335afaa83617ddf3d8"
}