javascript - このような行で 2 つの div を結合するには、何を使用できますか?

Question

おそらくさらにいくつかのオブジェクトを使用して、私が達成しようとしているものの例を次に示します。

2 つのブロックが 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; }