CSS基础测试14：steps - 步骤条

[wingmeng]

题目：

---

我的回答：

• 方案一：flex + clip-path

  > Demo <

<ol class="steps">
  <li>1-规则说明</li>
  <li>2-参与活动</li>
  <li class="is-current">3-参与抽奖</li>
  <li>4-奖品发放</li>
  <li>5-查看结果</li>
</ol>

.steps {
  display: flex;
  padding: 0; margin: 0;
  list-style: none;
}

.steps > li {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 2em;
  margin-left: -13px;  /* 15px - 13px = 2px(间隙) */
  font-size: 14px;
  color: #009fe9;
  clip-path: polygon(
    0 0, calc(100% - 15px) 0,
    100% 50%, 100% 50%,
    calc(100% - 15px) 100%, 0 100%,
    15px 50%
  );
  background: #edf9ff;
}

.steps > li:first-child {
  margin-left: 0;
  clip-path: polygon(
    0 0, calc(100% - 15px) 0,
    100% 50%, 100% 50%,
    calc(100% - 15px) 100%, 0 100%
  );
}

.steps > .is-current {
  color: #fff;
  background: #009fe9;
}

.steps > .is-current ~ li {
  color: #8c8c8c;
  background: #ebedf0;
}

• 方案二：table + 伪元素（兼容IE9+）

  > Demo <

<!-- HTML 结构同方案一 -->

.steps {
  display: table;
  border-collapse: separate;
  border-spacing: 30px 0;
  padding: 0; margin: 0;
  list-style: none;
}

.steps > li {
  position: relative;
  display: table-cell;
  height: 40px;
  padding: 0 1em 0 .5em;
  vertical-align: middle;
  font-size: 14px;
  color: #009fe9;
  background: #edf9ff;
}

.steps > li::before,
.steps > li::after {
  content: "";
  position: absolute;
  top: 0;
  border: solid transparent;
  border-width: 20px 14px;  /* (15 - 14) × 2 = 2px（间隙） */
}

.steps > li::before {
  left: 0;
  transform: translateX(-100%);
  border-color: #edf9ff;
  border-left-color: transparent;
}

.steps > li::after {
  right: 0;
  transform: translateX(100%);
  border-left-color: #edf9ff;
}

.steps > li:first-child::before {border-left-color: #edf9ff;}

.steps > .is-current {
  color: #fff;
  background: #009fe9;
}

.steps > .is-current::before {
  border-color: #009fe9;
  border-left-color: transparent;
}

.steps > .is-current:first-child:before {border-left-color: #009fe9;}

.steps > .is-current::after {border-left-color: #009fe9;}

.steps > .is-current ~ li {
  color: #8c8c8c;
  background: #ebedf0;
}

.steps > .is-current ~ li::before {
  border-color: #ebedf0;
  border-left-color: transparent;
}

.steps > .is-current ~ li::after {border-left-color: #ebedf0;}