Menu
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?
519
With CSS properties, you can easily put two <div> next to each other in HTML. Use the CSS property float to achieve this. With that, add height:100px and set margin.
To merge cells in HTML, use the colspan and rowspan attribute. The rowspan attribute is for the number of rows a cell should span, whereas the colspan attribute is for a number of columns a cell should span. Both the attribute will be inside the <td> tag.
To display multiple div tags in the same line, we can use the float property in CSS styles. The float property takes left, right,none(default value) and inherit as values. The value left indicates the div tag will be made to float on the left and right to float the div tag to the right.
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With