使用 CSS 实现箭头进度条

Question

我需要使用 CSS/SCSS、HTML 来实现这种进度条。

进度条快完成了。唯一的问题是箭头位置无法正常工作。我可以看到:before 是一个解决方案，但现在位置不正确。

<div class="progress-panel">
    <div class="progress-panel--arrow -complete">
      <div class="progress-panel--arrow-content">
        <div class="progress-panel--arrow-icon">
          <svg width="24" height="24" viewBox="0 0 24 24">
            <path d="M12 .75C5.8.75.75 5.8.75 12S5.8 23.25 12 23.25 23.25 18.2 23.25 12 18.2.75 12 .75zM9.75 17.62L4.13 12l1.58-1.6 4.05 4.04L18.3 5.9l1.57 1.6L9.75 17.62z" />
          </svg>
        </div>
        <div class="progress-panel--arrow-text">
          Ready
        </div>
      </div>
    </div>
    <div class="progress-panel--arrow -active">
      <div class="progress-panel--arrow-content">
        <div class="progress-panel--arrow-icon">
          <svg width="24" height="24" viewBox="0 0 24 24">
            <path d="M12 .83C5.84.83.83 5.83.83 12s5 11.17 11.17 11.17 11.17-5 11.17-11.17S18.17.83 12 .83zm0 20.1c-4.94 0-8.93-4-8.93-8.93s4-8.93 8.93-8.93 8.93 4 8.93 8.93-4 8.93-8.93 8.93z">
            </path>
          </svg>
        </div>
        <div class="progress-panel--arrow-text">
          Steady
        </div>
      </div>
    </div>
    <div class="progress-panel--arrow -incomplete">
      <div class="progress-panel--arrow-content">
        <div class="progress-panel--arrow-icon">
          <svg width="24" height="24" viewBox="0 0 24 24">
            <path d="M12 .83C5.84.83.83 5.83.83 12s5 11.17 11.17 11.17 11.17-5 11.17-11.17S18.17.83 12 .83zm0 20.1c-4.94 0-8.93-4-8.93-8.93s4-8.93 8.93-8.93 8.93 4 8.93 8.93-4 8.93-8.93 8.93z">
            </path>
          </svg>
        </div>
        <div class="progress-panel--arrow-text">
          Go
        </div>
      </div>
    </div>
</div>
<style >
  .progress-panel--arrow-text {
    font-family: sans-serif;
    margin-left: 10px;
  }
  .progress-panel {
    display: flex;
    flex-direction: row;
  }
  .progress-panel--arrow-content {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 50px;
  }
  .progress-panel--arrow-content:before {
    content: '';
    width: 0;
    height: 0;
    border-left: 25px solid #333;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    top: 0;
    left: 100%;
  }
  .-complete {
    background-color: #00a5af;
  }
  .-active{
    background-color: #ffffff;
  }
  .-incomplete {
    background-color: #e8ebee;
  }
</style>

Answer 1

您没有在:before 选择器中设置position。 SCSS 可以更方便地优化您的样式表。

与 CSS 相比，您甚至不需要在 SCSS 中重复三次 :before 选择器。

.progress-panel--arrow-text {
  font-family: sans-serif;
  margin-left: 10px;
}
.progress-panel {
  display: flex;
  flex-direction: row;
}
.progress-panel--arrow-content {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  width: 110px;
  height: 50px;
  &::before {
    content: '';
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    top: 0;
    left: 100%;
    position: absolute;
  }
}
.-complete {
  background-color: #00a5af;
  color: #ffffff;

  svg {
    fill: #ffffff;
  }

  .progress-panel--arrow-content::before {
    border-left: 25px solid #00a5af;
  }
}
.-active{
  background-color: #ffffff;
  color: #01a2ff;

  svg {
    fill: #01a2ff;
  }

  .progress-panel--arrow-content::before {
    border-left: 25px solid #ffffff;
  }
}
.-incomplete {
  background-color: #e8ebee;

  .progress-panel--arrow-content::before {
    border-left: 25px solid #e8ebee;
  }
}

完整的演示：https://codesandbox.io/s/divine-currying-y8b5g