How to connect HTML Divs with Lines?

html

responsive-design

css-transforms

javascript

byAnton Shumikhin·Dec 31, 2024

For an immediate solution to connect HTML divs with lines, apply CSS using position: absolute; and the ::after pseudo-element. The provided code snippet visually connects divs with styled lines:

<div class="box" id="box1"></div>
<div class="box" id="box2"></div>

<style>
.box {
  position: relative;
  width: 50px; height: 50px;
  border: 2px solid #000;
}

#box1::after {
  /* Let's draw a line... */
  content: '';
  position: absolute; 
  width: 100px; height: 2px; /* Line length & thickness */
  background: #000; /*black as my ex's heart*/
  top: 50%; left: 100%;
}

#box2 { position: absolute; top: 0; left: 160px; /* Adjust to distance between boxes */ }
</style>

Tweak the dimensions and absolute positions to suit your design, ensuring a precise visual link between elements.

Upgrading the link with SVG: Who said only Spiderman can draw lines?

For scalable and dynamic implementations, SVG lines are a perfect fit. SVG ensures clean and responsive connections, compatible with a host of screen sizes and devices, but without the radioactive spider.

Employing JavaScript to maintain connections: the Invisible String

Rely on JavaScript for dynamic positioning and upholding connection continuity in interactive pages. Leverage the JavaScript Math object to calculate SVG line positions and rotations. Apply CSS transformations to rotate connection lines accordingly.

Stick to HTML/CSS, no need for a canvas here: Picasso left the chat

Canvas might be tempting, but sticking with HTML/CSS results in a more accessible and maintainable solution. It's typically better for web layouts and is easier to debug and comprehend than canvas drawings, no art skills required.

jQuery to the rescue: not all heroes wear capes

jQuery may feel old school, but it's remarkably fit for the mission. Employing the jQuery Connections library simplifies rendering dynamic and adaptive connections between elements. Rapidly establish paths that instinctively adjust to the shifts of your divs.

Implementing div-lines: deception level 100

As an alternative to SVG, contemplate thin divs styled as lines that create visual bridges. Rotate them with the transform property for accurate alignment. Consequently, you add more DOM elements, but it's a wholly HTML/CSS method, no disguise needed.

Embracing responsive design: adapt or perish

Ensure your web design remains flexible with responsive design. It's crucial that your rendition adjusts to screen size variances and changing div positions - a pivotal feature for modern-day applications.

Making lines dynamic: doing the maths

Angling and positioning: because straight lines are boring

Make the centers of divs and the angle between them your calculation targets. This is crucial for accurately positioned connecting lines. A handy formula might look like this:

let angleRadians = Math.atan2(targetCenterY - sourceCenterY, targetCenterX - sourceCenterX);
let angleDegrees = angleRadians * (180 / Math.PI); /* Because pies are delicious */

Afterwards, employ a CSS transform to use the calculated angle for correct line rotation.

The Clone Wars: Libraries to the rescue

When structured guidance is needed, there are libraries to the rescue such as the jsPlumb Toolkit, offering dynamic connectivity functionalities. The toolbox of Stack Exchange houses a gold mine of solutions and discussions surrounding connections between divs.

explain-codes / Html / How to connect HTML Divs with Lines?

Linked

Draw a connecting line between two elements



Drawing an SVG file on a HTML5 canvas



How to style SVG with external CSS?



Html5 Canvas vs. SVG vs. div



How do I create a teardrop in HTML?

