jquery - Connect divisions with line

Question

I want a hierarchical structure for my project.I want to connect 2 division with a line(that line might be straight or L shaped). I am providing a picture so that you can get it easily. I used JPlumb Jquery API but I dont want to use it. Please help me. The line might be in forward,backward,up and down position.

---

Each block should be like this.

Answer 1

Check this one may be help full ..

html code:

  <div class='north'></div>
  <div class='northeast'></div>
  <div class='east'></div>
  <div class='southeast'></div>
  <div class='south'></div>
  <div class='southwest'></div>
  <div class='west'></div>
  <div class='northwest'></div>
  <div class='random'></div>
  <div class='forty-two'></div>

css classes

  div {
      display: inline-block;
      position: relative;
      margin: 1em;
    }

 .north {
        border-top: 5px solid #dcddd8;
        border-left: 5px solid #dcddd8;
        height: 10px;
        width: 10px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
       }

 .northeast {
          border-top: 5px solid #dcddd8;
          border-left: 5px solid #dcddd8;
          height: 20px;
          width: 20px;
          -webkit-transform: rotate(90deg);
          -moz-transform: rotate(90deg);
           transform: rotate(90deg);
           }

    .east {
       border-top: 5px solid #dcddd8;
       border-left: 5px solid #dcddd8;
       height: 30px;
       width: 30px;
      -webkit-transform: rotate(135deg);
      -moz-transform: rotate(135deg);
      transform: rotate(135deg);
       }

   .southeast {
     border-top: 5px solid #dcddd8;
     border-left: 5px solid #dcddd8;
     height: 40px;
     width: 40px;
     -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
     transform: rotate(180deg);
    }

   .south {
      border-top: 5px solid #dcddd8;
      border-left: 5px solid #dcddd8;
      height: 50px;
      width: 50px;
     -webkit-transform: rotate(225deg);
     -moz-transform: rotate(225deg);
      transform: rotate(225deg);
     }

    .southwest {
     border-top: 5px solid #dcddd8;
     border-left: 5px solid #dcddd8;
     height: 60px;
     width: 60px;
     -webkit-transform: rotate(270deg);
     -moz-transform: rotate(270deg);
      transform: rotate(270deg);
    }

    .west {
       border-top: 5px solid #dcddd8;
       border-left: 5px solid #dcddd8;
       height: 70px;
       width: 70px;
       -webkit-transform: rotate(315deg);
       -moz-transform: rotate(315deg);
       transform: rotate(315deg);
     }

       .northwest {
           border-top: 5px solid #dcddd8;
           border-left: 5px solid #dcddd8;
            height: 80px;
            width: 80px;
         }

          .random {
             border-top: 5px solid #dcddd8;
             border-left: 5px solid #dcddd8;
             height: 90px;
             width: 90px;
            -webkit-transform: rotate(54deg);
            -moz-transform: rotate(54deg);
             transform: rotate(54deg);
          }

      .forty-two {
       border-top: 5px solid #dcddd8;
       border-left: 5px solid #dcddd8;
       height: 100px;
       width: 100px;
       -webkit-transform: rotate(42deg);
       -moz-transform: rotate(42deg);
       transform: rotate(42deg);
      }

You can refer here for more custom arrows: http://codepen.io/rusu/pen/xcBfb