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

User · Answer

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

User · Answer

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   lt div class  box  id  box1  gt  lt  div gt   lt div class  box  id  box2  gt  lt  div gt   lt div class  box  id  box3  gt  lt  div gt    lt div class  line  id  line1  gt  lt  div gt   lt div class  line  id  line2  gt  lt  div gt       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

User · Answer

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   lt div id  block  gt   lt  div gt   lt div id  lineHorizontal  gt   lt  div gt   lt div id  block  gt   lt  div gt    This will display a block with a horizontal line to another block   On mobile devices you could use  caniuse com transforms2d

User · Answer

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

User · Answer

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

User · Answer

I made something like this to my project    x000D   x000D  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  gt  fT   x000D        var top     tT-fT  2   fT  x000D     else  x000D        var top     fT-tT  2   tT  x000D      x000D    if tL  gt  fL   x000D        var left    tL-fL  2   fL  x000D     else  x000D        var left    fL-tL  2   tL  x000D      x000D   x000D    if   fT  lt  tT  amp  amp  fL  lt  tL       tT  lt  fT  amp  amp  tL  lt  fL      fT  gt  tT  amp  amp  fL  gt  tL      tT  gt  fT  amp  amp  tL  gt  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   lt div id  content  gt  x000D     lt div id  div1  class  mydiv  gt  lt  div gt  x000D     lt div id  div2  class  mydiv  gt  lt  div gt  x000D     lt div id  line  gt  lt  div gt  x000D   lt  div gt  x000D     x000D   x000D   x000D

User · Answer

You can use SVGs to connect two divs using only HTML and CSS    lt div id  div1  style  width  100px  height  100px  top 0  left 0  background  777  position absolute   gt  lt  div gt   lt div id  div2  style  width  100px  height  100px  top 300px  left 300px  background  333  position absolute   gt  lt  div gt     please use seperate css file for styling   Create a svg line and  use this line to connect above divs   lt svg width  500  height  500  gt  lt line x1  50  y1  50  x2  350  y2  350  stroke  black   gt  lt  svg gt    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   x000D   x000D   lt div id  div1  style  width  100px  height  100px  top 0  left 0  background  777  position absolute   gt  lt  div gt  x000D   lt div id  div2  style  width  100px  height  100px  top 300px  left 300px  background  333  position absolute   gt  lt  div gt  x000D   x000D   lt svg width  500  height  500  gt  lt line x1  50  y1  50  x2  350  y2  350  stroke  black   gt  lt  svg gt  x000D   x000D   x000D

[javascript] How to connect HTML Divs with Lines?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css