加入方形div与圆形div

Question

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

Answer 1

您可以创建:after伪元素，然后在每个圆圈之间留出更长的空间，然后将其放置在左下方的圆圈下方。

如果保证金为20px，那么您可以创建每一行44px并设置right: 2px，以便在两侧的圆下有2px行。< / p>

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>

Answer 2

这样的东西？着色是需要更多关注的东西。

.container {
  display: table;
  margin: 5px 0 0 5px;
  border: thin solid gray;
  background: linear-gradient(to right, #3f4c6b 0%,#c675c1 100%);
}

.bar-side {
  vertical-align: middle;
  display: table-cell;
  width: 50px;
  height: 100px;
}

.bar-middle {
  vertical-align: middle;
  display: table-cell;
  width: 100px;
  height: 100px;
}

.bar {
  height: 30px;
  width: 100%;
  background-color: transparent;
  border: thin solid darkgray;
  display: inline-block;
}

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: thin solid darkgray;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 50px;
}

<div class="container">
  <div class="bar-side">
    <div class="bar"></div>
  </div>
  <div class="circle">2</div>
  <div class="bar-middle">
    <div class="bar"></div>
  </div>
  <div class="circle">3</div>
  <div class="bar-side">
    <div class="bar"></div>
  </div>
</div>