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?
-
1You asked is it possible, i will say yes but using css i will say no– VoonicOct 15, 2013 at 13:49
-
2maybe jsplumbtoolkit.com/home/jquery.html– Donovan CharpinOct 15, 2013 at 13:49
-
1I 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– MarsOneOct 15, 2013 at 13:59
-
Please refer to my answer here: stackoverflow.com/a/35493737/5947203– AniApr 21, 2017 at 13:43
7 Answers
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>
-
1PS: 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 -> stackoverflow.com/a/35493737/5947203– AniJun 3, 2017 at 18:02
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>
-
Thank you for the math solution– user670839Sep 23, 2019 at 22:34
-
You can use https://github.com/musclesoft/jquery-connections. This allows you connect block elements in DOM.
-
1This is a great library! Very easy to use and easily extendable. Feb 25, 2020 at 1:56
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);
}
-
Dont forget to include -webkit-transform:rotate(120deg); for those not using IE– MarsOneOct 15, 2013 at 14:01
-
1
-
-
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/
-
-
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 sigmajs.org which looks really nice and has a responsive demo on their front page.– LiavKOct 15, 2013 at 23:04
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)
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)