How to connect HTML Divs with Lines? [duplicate]
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>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>
You can use https://github.com/musclesoft/jquery-connections. This allows you connect block elements in DOM.
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);
}