What could I use to join two divs through a line like so?

Question

Here's an example of what I'm trying to achieve, perhaps with several more objects:

It is important that the two blocks be divs, so I'm not really looking for a drawing library that would help me receive something like that picture.

Any direction on what I could use?

@Asad From the OP, "It is important that the two blocks be divs" — Jordan, Aug 13 '13 at 22:15
Possible duplicate of http://stackoverflow.com/questions/8672369/how-to-draw-a-line-between-two-divs — Barbara Laird, Aug 13 '13 at 22:17
Possible duplicate of [Drawing a line between two divs](https://stackoverflow.com/questions/6278152/drawing-a-line-between-two-divs) — balupton, Nov 05 '18 at 21:03

score 5 · Accepted Answer · answered Aug 13 '13 at 22:13

5

Try jsPlumb. It should cover what you need, and then some.

answered Aug 13 '13 at 22:13

planestepper

3,277
26
38

That is a nice library! – Barbara Laird Aug 13 '13 at 22:16
Very solid. Thank you. – Louis93 Aug 14 '13 at 00:41

Ali Gajani · Answer 2 · 2013-08-13T22:21:13.757

JSFiddle: http://jsfiddle.net/LqFAX/1004/ (messed up but a good try) enter image description here

Another library: http://raphaeljs.com/graffle.html enter image description here

Yes you can draw lines using CSS3. Here's a nice starting point.

**HTML **

 <div class="div1"></div>
<div style="border-top: 1px solid #000; margin-top: 40px;"></div>
<div class="div2"><div>

CSS

    div, hr {
     -moz-transform: rotate(7.5deg);  
       -o-transform: rotate(7.5deg);  
  -webkit-transform: rotate(7.5deg);  
      -ms-transform: rotate(7.5deg);  
          transform: rotate(7.5deg);  
             filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',  
                      M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104); 
         -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104,sizingMethod='auto expand')"; 

               zoom: 1;
}


.div1 { width:100px; height:100px; background-color:red; }
.div2 { left:160%; width:100px; height:100px; background-color:orange; }

What could I use to join two divs through a line like so?

2 Answers2