CODEWITHSUNDEEP
jqueryhtmlcss
Viks
Viks

Reputation: 958

Connect divisions with line

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. enter image description here

Each block should be like this. enter image description here

Upvotes: 0

Views: 89

Answers (1)

Chinmaya Hegde
Chinmaya Hegde

Reputation: 775

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

Upvotes: 1

Related Questions