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?
This question is related to
javascript
jquery
html
css
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>_x000D_
<div id="div2" style="width: 100px; height: 100px; top:300px; left:300px; background:#333; position:absolute;"></div>_x000D_
_x000D_
<svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="350" stroke="black"/></svg>
_x000D_
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)
You can use https://github.com/musclesoft/jquery-connections. This allows you connect block elements in DOM.
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/
I made something like this to my project
function adjustLine(from, to, line){_x000D_
_x000D_
var fT = from.offsetTop + from.offsetHeight/2;_x000D_
var tT = to.offsetTop + to.offsetHeight/2;_x000D_
var fL = from.offsetLeft + from.offsetWidth/2;_x000D_
var tL = to.offsetLeft + to.offsetWidth/2;_x000D_
_x000D_
var CA = Math.abs(tT - fT);_x000D_
var CO = Math.abs(tL - fL);_x000D_
var H = Math.sqrt(CA*CA + CO*CO);_x000D_
var ANG = 180 / Math.PI * Math.acos( CA/H );_x000D_
_x000D_
if(tT > fT){_x000D_
var top = (tT-fT)/2 + fT;_x000D_
}else{_x000D_
var top = (fT-tT)/2 + tT;_x000D_
}_x000D_
if(tL > fL){_x000D_
var left = (tL-fL)/2 + fL;_x000D_
}else{_x000D_
var left = (fL-tL)/2 + tL;_x000D_
}_x000D_
_x000D_
if(( fT < tT && fL < tL) || ( tT < fT && tL < fL) || (fT > tT && fL > tL) || (tT > fT && tL > fL)){_x000D_
ANG *= -1;_x000D_
}_x000D_
top-= H/2;_x000D_
_x000D_
line.style["-webkit-transform"] = 'rotate('+ ANG +'deg)';_x000D_
line.style["-moz-transform"] = 'rotate('+ ANG +'deg)';_x000D_
line.style["-ms-transform"] = 'rotate('+ ANG +'deg)';_x000D_
line.style["-o-transform"] = 'rotate('+ ANG +'deg)';_x000D_
line.style["-transform"] = 'rotate('+ ANG +'deg)';_x000D_
line.style.top = top+'px';_x000D_
line.style.left = left+'px';_x000D_
line.style.height = H + 'px';_x000D_
}_x000D_
adjustLine(_x000D_
document.getElementById('div1'), _x000D_
document.getElementById('div2'),_x000D_
document.getElementById('line')_x000D_
);
_x000D_
#content{_x000D_
position:relative;_x000D_
}_x000D_
.mydiv{_x000D_
border:1px solid #368ABB;_x000D_
background-color:#43A4DC;_x000D_
position:absolute;_x000D_
}_x000D_
.mydiv:after{_x000D_
content:no-close-quote;_x000D_
position:absolute;_x000D_
top:50%;_x000D_
left:50%;_x000D_
background-color:black;_x000D_
width:4px;_x000D_
height:4px;_x000D_
border-radius:50%;_x000D_
margin-left:-2px;_x000D_
margin-top:-2px;_x000D_
}_x000D_
#div1{_x000D_
left:200px;_x000D_
top:200px;_x000D_
width:50px;_x000D_
height:50px;_x000D_
}_x000D_
#div2{_x000D_
left:20px;_x000D_
top:20px;_x000D_
width:50px;_x000D_
height:40px;_x000D_
}_x000D_
#line{_x000D_
position:absolute;_x000D_
width:1px;_x000D_
background-color:red;_x000D_
}
_x000D_
_x000D_
_x000D_
<div id="content">_x000D_
<div id="div1" class="mydiv"></div>_x000D_
<div id="div2" class="mydiv"></div>_x000D_
<div id="line"></div>_x000D_
</div>_x000D_
_x000D_
It's kind of a pain to position, but you could use 1px
wide divs as lines and position and rotate them appropriately.
<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);
}
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)
Source: Stackoverflow.com