用线连接分区

Question

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

---

每个块应该是这样的。   

Answer 1

检查一下可能会有所帮助..

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课程

  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