Как подключить горизонтальную/вертикальную линию между двумя div?

Question

мне интересно, как соединить два DIV элемента с линией, которая даже дистанцировался вид, как в этом сайте:

JSFiddle link: https://jsfiddle.net/mcbvb8m2/ 

Как бы вы сделать это для горизонтальных и вертикальных див? Любая помощь будет оценена! Спасибо.

Answer 1

Вы можете создать DIV с классом что-то вроде connector и стиль это посмотреть, как соединитель со следующими CSS:

.connector { 
    border: 6px solid #333; 
    border-right: 0; 
    border-top-left-radius: 8px; 
    border-bottom-left-radius: 8px; 
    height:50px; 
    width: 10px; 
} 

Вы можете изменить внешний вид этого, играя с толщиной пограничного , цвет и радиус границы. Это ухаживает за стилем.

Чтобы правильно установить его, вы можете использовать абсолютное или относительное позиционирование. В этом случае, чтобы использовать абсолютное позиционирование, примените position:absolute к классу connector. Чтобы разместить его, используйте такие свойства, как top, bottom, left и right. Абсолютное положение будет абсолютно позиционировать элемент относительно всей страницы, поэтому я рекомендую добавить position:relative в его родительский контейнер, чтобы он располагался относительно этого.

.container{ 
 
height:800px; 
 
width:100%; 
 
padding:50px; 
 
background:#eeeeee; 
 
    position:relative; 
 
    } 
 

 
.box-1{ 
 
    height:300px; 
 
    width:300px; 
 
    background:blue; 
 
    color:#fff; 
 
    margin-bottom:30px; 
 
} 
 

 
.box-2{ 
 
    height:300px; 
 
    width:300px; 
 
    background:red; 
 
    color:#fff; 
 
} 
 

 
.connector { 
 
    position:absolute; 
 
    top: 335px; 
 
    left: 35px; 
 
    border: 6px solid #333; 
 
    border-right: 0; 
 
    border-top-left-radius: 8px; 
 
    border-bottom-left-radius: 8px; 
 
    height:50px; 
 
    width: 10px; 
 
}

<div class="container"> 
 

 
    <div class="box-1"> 
 
    Box 1 
 
    </div> 
 
    
 
    <div class="box-2"> 
 
    Box 2 
 
    </div> 
 
    
 
    <div class="connector"></div> 
 

 
</div>