html - 将方形 div 与圆形 div 无缝连接

Question

我构建了一个带有“步骤”的进度条，这些“步骤”由一个栏(div)连接起来。如图所示，我需要让栏无缝地加入到每个“步骤”中。有没有办法做到这一点？例如。通过 ::before 和 ::after，而不引入一些严重的定位黑客？

Answer 1

您可以创建:after伪元素比每个圆之间的空间稍长，然后将其定位，使其位于左右圆下方。

如果边距为20px然后你可以创建每一行 44px例如并设置 right: 2px这样就有 2px两侧圆圈下的线。

ul {
  display: flex;
  font-size: 20px;
  list-style: none;
}
li {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: lightblue;
  position: relative;
  line-height: 70px;
  text-align: center;
  margin: 0 20px;
}
li:not(:last-child):after {
  content: '';
  height: 15px;
  width: 44px;
  background: green;
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translate(100%, -50%);
  z-index: -1;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>