javascript - 我可以用什么来通过这样的线加入两个 div？

Question

这是我想要实现的一个示例，可能还有更多对象：

这两个块是 div 很重要，所以我并不是真的在寻找可以帮助我接收类似图片的绘图库。

关于我可以使用什么的任何方向？

Answer 1

试试jsPlumb。它应该涵盖你需要的东西，然后是一些。

Answer 2

JSFiddle： http: //jsfiddle.net/LqFAX/1004/（搞砸了，但很好的尝试）

另一个库：http ://raphaeljs.com/graffle.html

是的，您可以使用 CSS3 绘制线条。这是一个很好的起点。

**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; }