How to draw a connection between two divs using css anchor positioning?

5 days ago 7

ARTICLE AD BOX

I used the new CSS anchoring to create a simple popover attached to a draggable button.
When the popover reaches the borders it flips correctly. https://codepen.io/raldone01/pen/pvEQrmd

popover with handle

Now I would like to connect the popover to the button.

Like so: https://codepen.io/raldone01/pen/ZYpmXYR

popover with handle and connector background

The goal is a pure CSS solution if at all possible! I am looking forward to your solutions!

Here is some code to experiment with:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Draggable Anchored Popover</title> <style> :root { --dropdown-bg: #2a2a2a; --button-bg: #444; --text-color: #eee; } body { margin: 0; height: 100vh; background-color: #121212; color: var(--text-color); overflow: hidden; } .selector-trigger { position: absolute; top: 50px; left: 50px; padding: 0.5rem 1rem; background-color: var(--button-bg); border-radius: 4px; cursor: grab; user-select: none; /* Define this element as the anchor reference */ anchor-name: --trigger; } .selector-trigger:active { cursor: grabbing; } .dropdown-menu { /* Absolute positioning is required for CSS anchoring */ position: absolute; /* Bind the popover to the trigger element */ position-anchor: --trigger; top: anchor(bottom); left: anchor(start); margin-top: 16px; /* Automatically flip the popover if it hits the edge of the viewport */ position-try-fallbacks: flip-block, flip-inline; padding: 1rem; background: var(--dropdown-bg); border-radius: 8px; min-width: 150px; min-height: 100px; } </style> </head> <body>  <div id="trigger" class="selector-trigger"> <span>Drag Me</span> </div>  <div class="dropdown-menu"> Empty Popover </div> <script> const trigger = document.getElementById("trigger"); let isDragging = false; let offsetX = 0; let offsetY = 0; // Calculate initial mouse offset relative to the trigger element trigger.addEventListener("mousedown", (e) => { isDragging = true; const rect = trigger.getBoundingClientRect(); offsetX = e.clientX - rect.left; offsetY = e.clientY - rect.top; }); // Update the absolute position of the trigger while dragging document.addEventListener("mousemove", (e) => { if (!isDragging) return; trigger.style.left = `${e.clientX - offsetX}px`; trigger.style.top = `${e.clientY - offsetY}px`; }); // Terminate the dragging state document.addEventListener("mouseup", () => { isDragging = false; }); </script> </body> </html>

Note: The connection doesn't have to look exactly like that. It was just a quick draft to show what I am going for.