How to connect HTML Divs with Lines?

Question

On my page I have a set of div elements that should be connected with lines like I showed in the image below. I know that with a canvas I can draw lines between these elements, but is it possible to do it in another way in html/css?

enter image description here

You asked is it possible, i will say yes but using css i will say no — Voonic, Oct 15 '13 at 13:49
I think this sort of stuff should be definately left to SVG . Mostly because as this can be created using CSS hacks but the site will become unresposive in mobile devices — MarsOne, Oct 15 '13 at 13:59
Please refer to my answer here: http://stackoverflow.com/a/35493737/5947203 — Ani, Apr 21 '17 at 13:43

Ani · Answer 1 · 2017-04-21T14:15:25.173

You can use SVGs to connect two divs using only HTML and CSS:

<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#777; position:absolute;"></div>
<div id="div2" style="width: 100px; height: 100px; top:300px; left:300px; background:#333; position:absolute;"></div>

(please use seperate css file for styling)

Create a svg line and use this line to connect above divs

<svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="350" stroke="black"/></svg>

where,

x1,y1 indicates center of first div and
x2,y2 indicates center of second div

You can check how it looks in the snippet below

<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#777; position:absolute;"></div>
<div id="div2" style="width: 100px; height: 100px; top:300px; left:300px; background:#333; position:absolute;"></div>

<svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="350" stroke="black"/></svg>

PS: for moving div's, you might want your `line` to update coordinates accordingly. But for that you will have to use JavaScript/JQuery. Visit this link to know how to do it -> https://stackoverflow.com/a/35493737/5947203 — Ani, Jun 03 '17 at 18:02

Rodrigo Damasceno · Answer 2 · 2017-06-05T23:15:58.080

I made something like this to my project

function adjustLine(from, to, line){

  var fT = from.offsetTop  + from.offsetHeight/2;
  var tT = to.offsetTop    + to.offsetHeight/2;
  var fL = from.offsetLeft + from.offsetWidth/2;
  var tL = to.offsetLeft   + to.offsetWidth/2;
  
  var CA   = Math.abs(tT - fT);
  var CO   = Math.abs(tL - fL);
  var H    = Math.sqrt(CA*CA + CO*CO);
  var ANG  = 180 / Math.PI * Math.acos( CA/H );

  if(tT > fT){
      var top  = (tT-fT)/2 + fT;
  }else{
      var top  = (fT-tT)/2 + tT;
  }
  if(tL > fL){
      var left = (tL-fL)/2 + fL;
  }else{
      var left = (fL-tL)/2 + tL;
  }

  if(( fT < tT && fL < tL) || ( tT < fT && tL < fL) || (fT > tT && fL > tL) || (tT > fT && tL > fL)){
    ANG *= -1;
  }
  top-= H/2;

  line.style["-webkit-transform"] = 'rotate('+ ANG +'deg)';
  line.style["-moz-transform"] = 'rotate('+ ANG +'deg)';
  line.style["-ms-transform"] = 'rotate('+ ANG +'deg)';
  line.style["-o-transform"] = 'rotate('+ ANG +'deg)';
  line.style["-transform"] = 'rotate('+ ANG +'deg)';
  line.style.top    = top+'px';
  line.style.left   = left+'px';
  line.style.height = H + 'px';
}
adjustLine(
  document.getElementById('div1'), 
  document.getElementById('div2'),
  document.getElementById('line')
);

#content{
  position:relative;
}
.mydiv{
  border:1px solid #368ABB;
  background-color:#43A4DC;
  position:absolute;
}
.mydiv:after{
  content:no-close-quote;
  position:absolute;
  top:50%;
  left:50%;
  background-color:black;
  width:4px;
  height:4px;
  border-radius:50%;
  margin-left:-2px;
  margin-top:-2px;
}
#div1{
  left:200px;
  top:200px;
  width:50px;
  height:50px;
}
#div2{
  left:20px;
  top:20px;
  width:50px;
  height:40px;
}
#line{
  position:absolute;
  width:1px;
  background-color:red;
}

  

<div id="content">
  <div id="div1" class="mydiv"></div>
  <div id="div2" class="mydiv"></div>
  <div id="line"></div>
</div>

score 27 · Answer 3 · answered Sep 11 '15 at 09:18

27

You can use https://github.com/musclesoft/jquery-connections. This allows you connect block elements in DOM.

answered Sep 11 '15 at 09:18

user2900150

433
7
13

James Montagne · Answer 4 · 2013-10-15T14:10:20.000

18

It's kind of a pain to position, but you could use 1px wide divs as lines and position and rotate them appropriately.

http://jsfiddle.net/sbaBG/1

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

<div class="line" id="line1"></div>
<div class="line" id="line2"></div>

.box {
    border: 1px solid black;
    background-color: #ccc;
    width: 100px;
    height: 100px;
    position: absolute;
}
.line {
    width: 1px;
    height: 100px;
    background-color: black;
    position: absolute;
}
#box1 {
    top: 0;
    left: 0;
}
#box2 {
    top: 200px;
    left: 0;
}
#box3 {
    top: 250px;
    left: 200px;
}
#line1 {
    top: 100px;
    left: 50px;
}
#line2 {
    top: 220px;
    left: 150px;
    height: 115px;

    transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
}

edited Oct 15 '13 at 14:10

answered Oct 15 '13 at 13:54

James Montagne

77,516
14
110
130

Dont forget to include -webkit-transform:rotate(120deg); for those not using IE – MarsOne Oct 15 '13 at 14:01
1

Updated with prefixes for IE 9 and webkit. – James Montagne Oct 15 '13 at 14:10
Would this work on mobile devices? – MarsOne Oct 15 '13 at 14:11
@marsone It should http://caniuse.com/transforms2d – James Montagne Oct 15 '13 at 14:12

score 3 · Answer 5 · answered Oct 15 '13 at 13:55

3

Definitely possible with any number of libraries and/or HTML5 technologies. You could possible hack something together in pure CSS by using something like the border-bottom property, but it would probably be horribly hacky.

If you're serious about this, you should take a look at a JS library for canvas drawing or SVG. For example, something like http://www.graphjs.org/ or http://jsdraw2dx.jsfiction.com/

answered Oct 15 '13 at 13:55

LiavK

702
6
20

But when I use Canvas I cannot bind events on the objects? – Michael Oct 15 '13 at 21:57
Depends exactly what you want to do. If you're concerned with mouse clicks you can get access to the mouseMove and click events and compare current mouse position to the position of elements in the canvas. There are lots of 2d and 3d canvas/webGL sketches which respond to mouse/keyboard events. I just did another random google search and found http://sigmajs.org/ which looks really nice and has a responsive demo on their front page. – LiavK Oct 15 '13 at 23:04

score 3 · Answer 6 · edited May 23 '17 at 12:03

3

Check my fiddle from this thread: Draw a line connecting two clicked div columns

The layout is different, but basically the idea is to create invisible divs between the boxes and add corresponding borders with jQuery (the answer is only HTML and CSS)

edited May 23 '17 at 12:03

Community

1
1

answered May 30 '14 at 10:18

oneday

1,599
5
18
29

123 · Answer 7 · 2013-10-15T14:30:29.817

2

Create a div that is the line with the code like this:

CSS

div#lineHorizontal {
    background-color: #000;
    width: //the width of the line or how far it goes sidewards;
    height: 2px;
    display: inline-block;
    margin: 0px;
 }
div#block {
    background-color: #777;
    display: inline-block;
    margin: 0px;
}

HTML

<div id="block">
</div>
<div id="lineHorizontal">
</div>
<div id="block">
</div>

This will display a block with a horizontal line to another block.

On mobile devices you could use (caniuse.com/transforms2d)

edited Oct 15 '13 at 14:30

answered Oct 15 '13 at 14:15

123

515
1
5
20

This doesn't display blocks or a line if run as is. – Jesse Reza Khorasanee Apr 13 '21 at 00:23

How to connect HTML Divs with Lines?

7 Answers7

Linked

Related