用线连接分区 [英] Connect divisions with line

问题描述

我想为我的项目建立一个层次结构。我想用一条线连接2个分区（该线可能是直线或L形）。我正在提供一张图片，以便您轻松搞定。
我使用了JPlumb Jquery API，但我不想使用它。请帮帮我。该线可能处于前进，后退，上下位置。

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.

推荐答案

检查这个可能是帮助满..

Check this one may be help full ..

html代码：

  <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 class

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);
      }

您可以在这里参考更多自定义箭头： http://codepen.io/rusu/pen/xcBfb

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

这篇关于用线连接分区的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！