如何以动态方式从一个元素到另一个元素绘制线条？

Question

我试图实现以这种方式连接每个div的行。 实现此设计的最佳方式是什么？问题是它可能是N个div框，因为它是重复的。

任何想法或建议都将受到高度赞赏！ 感谢

Answer 1

这样的东西似乎有效，你还需要弄清楚几件事（删除第一行，不同颜色，......）

＆＃13;

＆＃13;

.row {
  width: 100%;
  height: 20px;
  margin-bottom: 10px;
  background-color: green;
  transform: translateY(10px) translateX(-5px);
  position: relative;
}

.row:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 100%;
  width: 5px;
  height: 1px;
  border-top: 1px solid red;
  transform: translateY(-50%);
}

.container {
  padding-left: 10px;
  border-left: 1px solid red;
}

＆＃13;

<div class="row"></div>
<div class="container">
  <div class="row"></div>
  <div class="row"></div>
  <div class="container">
    <div class="row"></div>
    <div class="row"></div>
  </div>
  <div class="row"></div>
</div>

＆＃13;

＆＃13;

＆＃13;