Как подключить HTML Divs с линиями?

Question

На моей странице у меня есть набор элементов div, которые должны быть связаны с линиями, как показано на изображении ниже. Я знаю, что с холстом я могу рисовать линии между этими элементами, но можно ли это сделать по-другому в html/css?

Answer 1

Это своего рода боли в положении, но вы можете использовать 1px широкие дивы как линии и положение и поворачивать их соответствующим образом.

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

Answer 2

Определенно можно с любым количеством библиотек и/или технологии HTML5. Вы могли бы взломать что-то вместе в чистом CSS, используя что-то вроде свойства border-bottom, но это, вероятно, было бы ужасно хаки.

Если вы серьезно относитесь к этому, вы должны взглянуть на библиотеку JS для рисования холста или SVG. Например, что-то вроде http://www.graphjs.org/ или http://jsdraw2dx.jsfiction.com/

Answer 3

Создайте 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)

Answer 4

Проверить мою скрипку из этой темы: Draw a line connecting two clicked div columns

Компоновка отличается, но в основном идея заключается в том, чтобы создать невидимые дивы между коробками и добавить соответствующие границы с помощью jQuery (ответ - только HTML и CSS)

Answer 5

Вы можете использовать https://github.com/musclesoft/jquery-connections. Это позволяет подключать элементы блока в DOM.

Answer 6

Вы можете использовать SVGs для соединения двух див, используя только HTML и CSS:

<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 линию и использовать эту линию для подключения выше дивы

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

Answer 7

I made something like this to my project

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>