77

在我的页面上，我有一组 div 元素，它们应该与如下图所示的线条相连。我知道使用画布我可以在这些元素之间画线，但是否可以在 html/css 中以另一种方式做到这一点？

在此处输入图像描述

4

7 回答 7

67

您可以使用 SVG 仅使用 HTML 和 CSS 连接两个 div：

<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>

（请使用单独的 css 文件进行样式设置）

创建一个 svg 线并使用此线连接上面的 div

<svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="350" stroke="black"/></svg>

在哪里，

x1,y1 表示第一个 div 的中心，
x2,y2 表示第二个 div 的中心

您可以在下面的代码段中查看它的外观

<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>

于 2016-02-18T22:24:16.363 回答
41

我为我的项目做了这样的事情 

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>

于 2016-03-16T19:25:22.793 回答
27

您可以使用https://github.com/musclesoft/jquery-connections。这允许您连接 DOM 中的块元素。

于 2015-09-11T09:18:23.647 回答
17

定位有点麻烦，但是您可以使用1px宽 div 作为线条和位置并适当地旋转它们。

http://jsfiddle.net/sbaBG/1

<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>

<div class="line" id="line1"></div>
<div class="line" id="line2"></div>

.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);
}
于 2013-10-15T13:54:27.193 回答
3

绝对可以使用任意数量的库和/或 HTML5 技术。您可以使用诸如border-bottom 属性之类的东西在纯CSS 中组合一些东西，但它可能会非常hacky。

如果您对此很认真，则应该查看用于画布绘图或 SVG 的 JS 库。例如，类似http://www.graphjs.org/或http://jsdraw2dx.jsfiction.com/

于 2013-10-15T13:55:58.567 回答
3

从这个线程检查我的小提琴：画一条连接两个单击的 div 列的线

布局不同，但基本上思路是在box之间创建不可见的div，并用jQuery添加相应的边框（答案只有HTML和CSS）

于 2014-05-30T10:18:26.433 回答
2

创建一个 div，它是这样的代码行：

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

<div id="block">
</div>
<div id="lineHorizontal">
</div>
<div id="block">
</div>

这将显示一个带有水平线的块到另一个块。

在您可以使用的移动设备上 (caniuse.com/transforms2d)

于 2013-10-15T14:15:10.870 回答