jquery - 用线连接分部

Question

我想要我的元素的层次结构。我想用一条线(这条线可能是直线或 L 形)连接 2 个部分。我提供了一张图片，这样你就可以很容易地得到它。 我使用了 JPlumb Jquery API，但我不想使用它。请帮我。这条线可能处于向前、向后、向上和向下的位置。

---

每个 block 应该是这样的。

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