CSS基础测试14 - 面包屑

[JaimeCheng]

题目：

原issue

回答：

/* 得分 8 */
.step-item {
  height: 40px;
  font-size: 14px;
  padding: 10px 25px;
  margin: 0 0 5px -15px;
  display: inline-block;
  box-sizing: border-box;
  text-decoration: none;
  color: #009fe9;
  background: #edf9ff;
  -webkit-clip-path: polygon(87% 0, 100% 50%, 87% 100%, 0 100%, 13% 50%, 0 0);
          clip-path: polygon(87% 0, 100% 50%, 87% 100%, 0 100%, 13% 50%, 0 0);
}
.step-item:first-of-type {
  color: #009fe9;
  -webkit-clip-path: polygon(0 0, 87% 0, 100% 50%, 87% 100%, 0% 100%);
          clip-path: polygon(0 0, 87% 0, 100% 50%, 87% 100%, 0% 100%);
}
.step-item.curr {
  color: #fff;
  background: #009fe9;
}
.step-item.step-curr~.step-item {
  color: #8c8c8c;
  background-color: #EBEDF0;
}

<div class="step-bar">
  <a class="step-item">1-规则说明</a>
  <a class="step-item">2-参与活动</a>
  <a class="step-item curr">3-参与抽奖</a>
  <a class="step-item">4-奖品发放</a>
  <a class="step-item">5-查看结果</a>
</div>

满分回答 | 思路奇特回答

总结：

1. clip-path 不兼容 ie；
2. border必备；
3. transform: skew 厉害；
4. 导航最好不换行。

> 在线demo <

[JaimeCheng]

zxx: 本期要点：

1. 就本题而言，就实际开发而言，反序是没有必要的。因为会常驻选中类名，DOM顺序是1-5也是可以实现样式控制的。所有列表 淡蓝, .active 高亮深天空蓝，~后面的灰色。给前面的状态添加一个独立的类名是会增加实际开发的复杂度，是不推荐的，应该活用选择器的一些技术降低我们的维护成本。
2. 应该是1/2尺寸图。考虑下不要掉下来。
3. 三角的实现，三类方法： clip-path：最容易理解，比较符合现实认知，推荐百分比控制（无论尺寸大小形状都OK），最大的问题：兼容性，IE全军覆没，移动端可以使用。 border: 切图前端必备技能。https://www.zhangxinxu.com/wordpress/?p=794 问题：定位比较啰嗦（占据尺寸，需要具体定位），border不支持百分比（据说新的规范在考虑支持），尺寸变化有额外成本。优点：兼容性非常好，IE7+支持。border-color: transparent; IE7+支持，IE6需要使用dashed实现。background: transaprent; IE6+支持。 color: transparent; IE9+支持，原生IE8不支持。 transform: skewX()。最佳实现，兼顾尺寸控制，定位与兼容性，理解也非常好理解。兼容性IE9+都支持，-ms-。现在2019年了，对于transform属性，-webkit-,-moz-私有前缀没有必要再写了。
4. 前面的数值显示。使用计数器，前面的1-,2-,3-,...没有必要写在HTML中，以后调整（增减），HTML还需要同时维护。counter计数器优化我们的实现。https://www.zhangxinxu.com/wordpress/?p=4303 IE8+支持。
5. 语义，更接近 ol > li。还有一点nav的语义。