How to connect a horizontal/vertical line between two divs? - html

Question

I'm wondering how to connect two div elements with a line which is even distanced kind of like the one in this website:
JSFiddle link: https://jsfiddle.net/mcbvb8m2/
How would you do this for horizontal and vertical divs?
Any help would be appreciated!
Thanks.

Answer 1

You can create a div with a class of something like connector and style this to look like the connector with the following CSS:
.connector {
border: 6px solid #333;
border-right: 0;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
height:50px;
width: 10px;
}
You can change the appearance of this by playing around with the border thickness, colour and border-radius. This takes care of the styling.
To position it correctly, you can use absolute or relative positioning. In this case to use absolute positioning, apply position:absoluteto the connector class. To position it use properties such as top, bottom, left and right. The absolute position will absolutely position the element relative to the entire page so I'd recommend adding position:relative to its parent container so it is positioned relative to this.
.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>