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>