div中的行跟随另一个特定的div

Question

我需要帮助让线条跟随另一个特定的div。 我有五个circle1，circle2，circle3，circle4，circle5和四行，这四行跟在div circle5之后，如下所示：

这就是代码的样子

<div class="circle1"></div>
<svg><line id="line" x1="20" y1="100" x2="100" y2="100" stroke-width="2" stroke="black"></line></svg>

<div class="circle2"></div>
<svg><line id="line" x1="20" y1="100" x2="100" y2="100" stroke-width="2" stroke="black"></line></svg>

<div class="circle3"></div>
<svg><line id="line" x1="20" y1="100" x2="100" y2="100" stroke-width="2" stroke="black"></line></svg>

<div class="circle4"></div>
<svg><line id="line" x1="20" y1="100" x2="100" y2="100" stroke-width="2" stroke="black"></line></svg>

<div class="circle5"></div>

如何使用css或JS实现此目的？

Answer 1

您可以使用CSS pseudo elements实现上述设计以及一些绝对定位。这是一个关于如何使用CSS实现它的粗略示例。

＆＃13;

＆＃13;

.circle {
  width: 35px;
  height: 35px;
  background-color: blue;
  position: relative;
  border-radius: 50%;
}

.circle:after {
content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) rotate(-30deg);
  transform-origin: 0% 0%;
  width: 1px;
  height: 100px;
  background-color: blue;
}

＆＃13;

  <div class="circle"></div>

＆＃13;

＆＃13;

＆＃13;