How to Draw a Line Between Two Divs

how to draw lines between two divs in html

The only real option your going to have is to use a <canvas>. You can stack all of your elements on top of a large canvas, then you'll have to calculate their positions and draw lines.

Your HTML will look something like this:

<div id="container">
  <canvas id="canvas">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

Then you'll have to size the container and canvas to the same, then position your divs on top of that. Then using combinations of the div's offsetTop and offsetLeft, you'll have to figure out their position then use the canvas draw functions to draw the lines.

This will give you a basic approach. Take a stab at creating the code and you can post another answer if you get stuck.

Another alternative would be to use <hr> elements and the transform CSS property to rotate and position, but that math would be pretty annoying to work out and still wouldn't be as clean as the canvas approach.

Draw a static line between two divs

if it stands on 1 line, you could add pseudo element and filter first and last box, to draw or not a line aside.

div.boxItem {   display: inline-block;  border: 1px solid black;  padding: 1em;    margin-right: 5em;  position:relative}
.boxItem:before,.boxItem:after{  content:'';  width:5em;/* size of your margin */  border-bottom:1px solid;  position:absolute;  top:50%;
}:after {  left:100%;}:before {  right:100%;}.boxItem:first-of-type:before,.boxItem:last-of-type:after {  display:none;}.myBox {  white-space:nowrap; /* */ text-align:center;  }body {
}

<div class="myBox">  <div class="boxItem">1</div>  <div class="boxItem">2</div>  <div class="boxItem">3</div>  <div class="boxItem">4</div></div><div class="myBox">  <div class="boxItem">1</div>  <div class="boxItem">2</div>  <div class="boxItem">3</div></div><div class="myBox">  <div class="boxItem">1</div>  <div class="boxItem">2</div></div><div class="myBox">  <div class="boxItem">1</div></div>

Connect a line between 2 divs

jQuery

1. Try to wrap your code into "document ready" construction. This will ensure that the code is executed after the jQuery is loaded.

2. Define the stroke and stroke-width attributes to make the line visible.

$(function() {
  var line1= $('#line1');
  var div1 = $('#org1');
  var div2 = $('#org2');

  var l1pos1 = div1.position();
  var l1pos2 = div2.position();

  line1
    .attr('x1', l1pos1.left)
    .attr('y1', l1pos1.top)
    .attr('x2', l1pos2.left)
    .attr('y2', l1pos2.top)
    .attr('stroke', 'red')
    .attr('stroke-width', 10);
});

.con{
    margin-top: 50px;
}

.con-title{
    width: 100%;
    text-align: center;
    color: #4E4E50;
    font-size: 40px;
    font-weight: bold;
}

.org-map{
    position: relative;
    width: 300px;
    height: 300px;
    margin: 40px auto 0 auto;
}

.org{
    position: absolute;
}

.org .org-box{
    position: relative;
    bottom: 0px;
    width: 15px;
    height: 15px;
    border-radius: 20px;
    background: #4E4E50;
    transition: 0.6s;
}

#org1{
    transform: translate(-50%, 0%);
    bottom: 80%;
    left: 50%;
}

#org2{
    transform: translate(-50%, 0%);
    bottom: 65%;
    left: 20%;
}

#org3{
    transform: translate(-50%, 0%);
    bottom: 35%;
    left: 20%;
}

#org4{
    transform: translate(-50%, 0%);
    bottom: 50%;
    left: 50%;
}

#org5{
    transform: translate(-50%, 0%);
    bottom: 65%;
    left: 80%;
}

#org6{
    transform: translate(-50%, 0%);
    bottom: 35%;
    left: 80%;
}

#org7{
    transform: translate(-50%, 0%);
    bottom: 20%;
    left: 50%;
}

.org:hover .org-box{
    background: #C3073F;
    animation: org 1s;
    animation-fill-mode: forwards;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="con">
  <div class="con-title">Contributions</div>
  <div class="org-map">
    <div class="org" id="org1">
        <div class="org-box">
            <img src="" alt="Sample Image">
        </div>
    </div>
    <div class="org" id="org2">
        <div class="org-box">
            <img src="" alt="Sample Image">
        </div>
    </div>
    <div class="org" id="org3">
        <div class="org-box">
            <img src="" alt="Sample Image">
        </div>
    </div>
    <div class="org" id="org4">
        <div class="org-box">
            <img src="" alt="Sample Image">
        </div>
    </div>
    <div class="org" id="org5">
        <div class="org-box">
            <img src="" alt="Sample Image">
        </div>
    </div>
    <div class="org" id="org6">
        <div class="org-box">
            <img src="" alt="Sample Image">
        </div>
    </div>
    <div class="org" id="org7">
        <div class="org-box">
            <img src="" alt="Sample Image">
        </div>
    </div>
    <svg width="500" height="500">
        <line id="line1"/>
        <line id="line2"/>
    </svg>
  </div>
</div>

how to add vertical line between two divs

You can also use pseudo elements to make a vertical separator. You don't need an extra div to make a separator just use the pseudo elements and style it according to your needs.

#wrapper_1 {  background-color: pink;  height: 100px;  float: left;  width: 100px;}#wrapper_1:after {  content: "";  background-color: #000;  position: absolute;  width: 5px;  height: 100px;  top: 10px;  left: 50%;  display: block;}#wrapper_2 {  background-color: brown;  height: 100px;  width: 100px;  float: right;}

<div id="wrapper_1">  Creating slideshows PHP</div>
<div id="wrapper_2">  Creating slideshows with WordPress</div>

How to draw a line between two divs?

http://jsfiddle.net/cnmsc1tm/

This won't work with IE8 or below because of CSS limitations.

function getOffset( el ) {
    var rect = el.getBoundingClientRect();
    return {
        left: rect.left + window.pageXOffset,
        top: rect.top + window.pageYOffset,
        width: rect.width || el.offsetWidth,
        height: rect.height || el.offsetHeight
    };
}

function connect(div1, div2, color, thickness) { // draw a line connecting elements
    var off1 = getOffset(div1);
    var off2 = getOffset(div2);
    // bottom right
    var x1 = off1.left + off1.width;
    var y1 = off1.top + off1.height;
    // top right
    var x2 = off2.left + off2.width;
    var y2 = off2.top;
    // distance
    var length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));
    // center
    var cx = ((x1 + x2) / 2) - (length / 2);
    var cy = ((y1 + y2) / 2) - (thickness / 2);
    // angle
    var angle = Math.atan2((y1-y2),(x1-x2))*(180/Math.PI);
    // make hr
    var htmlLine = "<div style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);' />";
    //
    // alert(htmlLine);
    document.body.innerHTML += htmlLine;
}

• The Distance Formula
• Finding the Center Of Two Points
• Finding the Angle Between Two Points
• CSS Transform:Rotate
• HTML Element offset[Width|Height|Top|Left] properties

Edit (for others with the same problem):

If you need to, for example, create a line from two corners that are not the top right and bottom right divs, go to this section of the code:

// bottom right
var x1 = off1.left + off1.width;
var y1 = off1.top + off1.height;
// top right
var x2 = off2.left + off2.width;
var y2 = off2.top;

where you see + off1.width and + off1.height, that means that the code is calculating the position of the bottom or the right of the div. Remove the + off1.width or the + off1.height to get the left or the top of the div.

EDIT updated to a more standard getOffset function. If you want to get really anal you'd probably also have to add document.documentElement.client[Left/Top] and walk the offsetParent tree, but I think getBoundingClientRect() and window.page[X/Y]Offset are sufficient for an example like this.

trying to create a line between two divs

You can use Flexbox

section {  display: flex;  align-items: center;}.line {  height: 2px;  flex: 1;  background: red;  margin: 0 10px;}

<section>  <div class="home">Home</div>  <div class="line"></div>  <div class="logout">Reports    <button> <a href="web url"> log out </a> </button>  </div></section>

---

Related Topics