quiz icon indicating copy to clipboard operation
quiz copied to clipboard

Published 20 hours ago • verified publisher icon zhangxinxu

CSS基础测试14

Open zhangxinxu opened this issue 5 years ago • 23 comments

本期小测关于不规则图形导航效果的实现：

2x 原图地址是：https://image.zhangxinxu.com/image/blog/201911/group.png

每个要点1积分，非纯CSS实现（就是使用图片）最多2积分。

请附上对应的CSS代码，注意缩进和代码高亮（没有减1分），可以使用下面语法进行高亮：

```css
你的代码在这里
```

请提供在线的可访问的demo地址（精力有限，没有demo减1分），如jsbin.com、jsfiddle.net或codepen.io，使用国内的类似工具也可以。

本期小测直播答疑暂定为本周六11月9日上午10:00，大约20分钟，直播地址：https://live.bilibili.com/21193211

首位答题者会获得100%倍被翻牌技能，每位答题者都可获得2积分底分。

感谢您的参与！

zhangxinxu avatar Nov 06 '19 10:11 zhangxinxu

demo

<div class="crumbs">
    <a tabindex="5" href="https://www.baidu.com">5-查看结果</a>
    <a tabindex="4" href="https://www.baidu.com">4-奖品发放</a>
    <a tabindex="3" href="https://www.baidu.com">3-参与抽奖</a>
    <a tabindex="2" href="https://www.baidu.com">2-参与活动</a>
    <a tabindex="1" href="https://www.baidu.com">1-规则说明</a>
  </div>
  <div class="crumbs2">
    <a tabindex="10" href="https://www.baidu.com">5-查看结果</a>
    <a tabindex="9" href="https://www.baidu.com">4-奖品发放</a>
    <a tabindex="8" href="https://www.baidu.com">3-参与抽奖</a>
    <a tabindex="7" href="https://www.baidu.com">2-参与活动</a>
    <a tabindex="6" href="https://www.baidu.com">1-规则说明</a>
  </div>
  <div class="crumbs3">
    <a tabindex="15" href="https://www.baidu.com">5-查看结果</a>
    <a tabindex="14" href="https://www.baidu.com">4-奖品发放</a>
    <a tabindex="13" href="https://www.baidu.com">3-参与抽奖</a>
    <a tabindex="12" href="https://www.baidu.com">2-参与活动</a>
    <a tabindex="11" href="https://www.baidu.com">1-规则说明</a>
  </div>


/* zxx: 反转其实没有必要的 */
/* direction 反转*/
.crumbs {
      direction: rtl;
      text-align: left;
    }

    .crumbs a {
      direction: ltr;
      display: inline-block;
      padding: 20px 35px;
      margin-left: -15px;
      background: #ebedf0;
      color: #a1a2a3;
      text-decoration: none;
      clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%, 15% 50%);
    }

    .crumbs :last-child {
      margin-left: 0;
      clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
    }

    .crumbs a:focus~a {
      background: #edf9ff;
      color: #09a2e9;
    }

    .crumbs a:focus {
      background: #009fe9;
      color: white;
    }

    .crumbs a:hover~a {
      background: #edf9ff;
      color: #09a2e9;
    }

    .crumbs a:hover {
      background: #009fe9;
      color: white;
    }

/* flex 反转*/
    .crumbs2 {
      display: flex;
      flex-direction: row-reverse;
      justify-content: flex-end;
      flex-wrap: wrap;
      margin-top: 20px;
    }


    .crumbs2 a {
      display: inline-block;
      padding: 20px 35px;
      margin-left: -15px;
      background: #ebedf0;
      color: #a1a2a3;
      text-decoration: none;
      clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%, 15% 50%);
    }

    .crumbs2 :last-child {
      margin-left: 0;
      clip-path: polygon(0 0, 85% 0, 100% 50%, 85% 100%, 0 100%);
    }

    .crumbs2 a:focus~a {
      background: #edf9ff;
      color: #09a2e9;
    }

    .crumbs2 a:focus {
      background: #009fe9;
      color: white;
    }

    .crumbs2 a:hover~a {
      background: #edf9ff;
      color: #09a2e9;
    }

    .crumbs2 a:hover {
      background: #009fe9;
      color: white;
    }


/* 兼容ie9 */
    .crumbs3 {
      direction: rtl;
      text-align: left;
      margin-top: 20px;
    }


    .crumbs3 a {
      direction: ltr;
      display: inline-block;
      margin-left: 65px;
      background: #ebedf0;
      color: #a1a2a3;
      text-decoration: none;
      position: relative;
      height: 60px;
      line-height: 60px;
    }

    .crumbs3 a:after {
      content: '';
      height: 0;
      width: 0;
      position: absolute;
      top: 0;
      bottom: 100%;
      left: 100%;
      border: 30px solid transparent;
      border-left-color: #ebedf0;
    }

    .crumbs3 a:before {
      content: '';
      height: 0;
      width: 0;
      position: absolute;
      top: 0;
      bottom: 100%;
      right: 100%;
      border: 30px solid #ebedf0;
      border-left-color: transparent;
    }



    .crumbs3 :last-child:before {
      border-color: #ebedf0;
    }


    .crumbs3 :last-child:hover:before,
    .crumbs3 :last-child:focus:before {
      border-color: #009fe9;
    }

    .crumbs3 a:hover~a:before,
    .crumbs3 a:focus~a:focus {
      border-color: #edf9ff;
    }

    .crumbs3 a:hover~:last-child:before {
      border-color: #edf9ff;
    }


    .crumbs3 a:focus~a {
      background: #edf9ff;
      color: #09a2e9;
    }

    .crumbs3 a:focus~a:after {
      border-left-color: #edf9ff;
    }

    .crumbs3 a:focus~a:before {
      background: #edf9ff;
      color: #09a2e9;
    }

    .crumbs3 a:focus~a:after {
      border-left-color: #edf9ff;
    }

    .crumbs3 a:focus~a:before {
      border-color: #edf9ff #edf9ff #edf9ff transparent;
    }

    .crumbs3 a:focus {
      background: #009fe9;
      color: white;
    }

    .crumbs3 a:focus:after {
      border-left-color: #009fe9;
    }

    .crumbs3 a:focus:before {
      border-color: #009fe9 #009fe9 #009fe9 transparent;
    }

    .crumbs3 a:hover~a {
      background: #edf9ff;
      color: #09a2e9;
    }

    .crumbs3 a:hover~a:after {
      border-left-color: #edf9ff;
    }

    .crumbs3 a:hover~a:before {
      border-color: #edf9ff #edf9ff #edf9ff transparent;
    }

    .crumbs3 a:hover {
      background: #009fe9;
      color: white;
    }

    .crumbs3 a:hover:after {
      border-left-color: #009fe9;
    }

    .crumbs3 a:hover:before {
      border-color: #009fe9 #009fe9 #009fe9 transparent;
    }

les-lee avatar Nov 06 '19 11:11 les-lee

DEMO: JSBIN

.step {
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 0;
    overflow: auto;
    white-space: nowrap;
    position: relative;
}

.step a {
    color: inherit;
    text-decoration: none;
}

/* 拓展可点击区域 */
.step a:before {
    content: "";
    position: absolute;
    top: 0;
    left: -1em;
    bottom: 0;
    right: -1em;
}

.step li {
    font-size: 14px;
    display: inline-block;
    vertical-align: top;
    line-height: 1em;
    background-color: #EDF9FF;
    color: #009fe9;
    padding: 1em 0.5em 1em 1em;
    position: relative;
}

.step li+li {
    margin-left: 1.4em;
}

.step li:first-child {
    border-left: 1em solid transparent;
}

.step li:after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    margin-top: -1.5em;
    height: 0;
    border-top: 1.5em solid transparent;
    border-bottom: 1.5em solid transparent;
    border-left: 1.2em solid #EDF9FF;
}

.step li:before {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    margin-top: -1.5em;
    height: 0;
    border-top: 1.5em solid #EDF9FF;
    border-bottom: 1.5em solid #EDF9FF;
    border-left: 1.2em solid transparent;
}

.step li:hover,
.step ._current {
    background-color: #009fe9;
    color: #ffffff;
}

.step li:hover:after,
.step ._current:after {
    border-left-color: #009fe9;
}

.step li:hover:before,
.step ._current:before {
    border-top-color: #009fe9;
    border-bottom-color: #009fe9;
}

.step ._current~li {
    background-color: #EBEDF0;
    color: #8c8c8c;
}

.step ._current~li:after {
    border-left-color: #EBEDF0;
}

.step ._current~li:before {
    border-top-color: #EBEDF0;
    border-bottom-color: #EBEDF0;
}

<ol class="step">
    <li><a href="#" title="规则说明">1-规则说明</a></li>
    <li><a href="#" title="参与活动">2-参与活动</a></li>
    <li class="_current">3-参与抽奖</li>
    <li>4-奖品发放</li>
    <li>5-查看结果</li>
</ol>

ziven27 avatar Nov 06 '19 12:11 ziven27

jsbin


/* 思路666 */
.container {
    display: flex;
    font-size: 13px;
    font-weight: bold;
    color: #009fe9;
}

.item {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid transparent;
    position: relative;
    width: 110px;
    height: 38px;
}

.item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 50%;
    width: 100%;
    background: #edf9ff;
    transform: skew(30deg);
    z-index: -1;
}

.item::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 50%;
    width: 100%;
    background: #edf9ff;
    transform: skew(-30deg);
    z-index: -1;
}

.active {
    color: #d7effb;
}

.active::before,
.active::after {
    background: #009fe9;
}

.active~.item {
    color: #909091;
}

.active~.item::before,
.active~.item::after {
    background: #ebedf0;
}

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

liyongleihf2006 avatar Nov 06 '19 12:11 liyongleihf2006

demo

<div class="steps" role="progressbar">
    <!--progressbar好像有些欠妥?-->
    <a class="step-item" aria-label="1-规则说明">1-规则说明</a>
    <a class="step-item" aria-label="2-参与活动">2-参与活动</a>
    <a class="step-item current" aria-label="3-参与抽奖" role="presentation">3-参与抽奖</a>
    <a class="step-item" aria-label="4-奖品发放">4-奖品发放</a>
    <a class="step-item" aria-label="5-查看结果">5-查看结果</a>
</div>

/* 实现尺寸应该是效果图1/2 */

.steps{
    overflow: hidden;
}
.step-item{
    position: relative;
    /*display: inline-block;*/
    /*最新chrome有bug，背景色不生效*/
    float:left;
    font-size: 26px;
    line-height: 80px;
    padding: 0 20px;
    color: #edf9ff;
    background: currentColor;
    margin-left: 40px;
}
.step-item::first-line{
    color: #009fe9;
}
.step-item::before{
    position: absolute;
    content: '';
    border-width: 40px 0 40px 35px;
    left: -35px;
    border-style: solid;
    border-color: currentColor currentColor currentColor transparent;
}
.step-item::after{
    position: absolute;
    content: '';
    border-width: 40px 0 40px 35px;
    right: -35px;
    border-style: solid;
    border-color: transparent transparent transparent currentColor;
}
.step-item:first-child{
    margin-left: 35px;
}
.step-item:first-child::before{
    border-left-color: currentColor;
}
.step-item.current{
    color: #009fe9;
}
.step-item.current::first-line{
    color: #fff;
}
.step-item.current~.step-item{
    color: #ebedf0;
}
.step-item.current~.step-item::first-line{
    color: #8c8c8c;
}

发现一个bug

有个很奇怪的现象，在最新chrome上面（低版本没有这个问题），设置了::first-line的color属性会导致inline-block的背景色失效，算不算bug?下面是截图

image

XboxYan avatar Nov 06 '19 13:11 XboxYan

  • 方案一：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;}

wingmeng avatar Nov 06 '19 14:11 wingmeng

本来想用clip-path。。结果这个兼容性好像不太好 Demo

<nav role="navigation">
  <ol class="navigation">
    <li class="navigation-item"><a href="">规则说明</a></li>
    <li class="navigation-item"><a href="">参与活动</a></li>
    <li class="navigation-item" aria-current="true"><a href="">参与抽奖</a></li>
    <li class="navigation-item"><a href="">奖品发放</a></li>
    <li class="navigation-item"><a href="">查看结果</a></li>
  </ol>
</nav>

/* zxx: 计数器的使用加分 */

.navigation {
  display: flex;
  list-style: none;
  counter-reset: listCounter;
  justify-content: flex-start;
  font-size: 16px;
  line-height: 1;
}

a {
  text-decoration: none;
}

a:visited {
  color: currentColor;
}

.navigation-item a::before {
  content: counter(listCounter) "-";
}

.navigation-item {
  position: relative;
  counter-increment: listCounter;
  color: #499fe9;
  border-color: #edf9fe;
  background: #edf9fe;
  padding: 1em;
  white-space: nowrap;
  cursor: pointer;
}

.navigation-item:first-child {
  padding-left: 2.3em;
}

.navigation-item:not(:first-child)::before {
  border: 1.5em solid;
  border-color: inherit;
  border-left: 1.3em solid transparent;
  border-right: none;
  position: absolute;
  right: 100%;
  top: 0;
  content: '';
}

.navigation-item::after {
  border: 1.5em solid transparent;
  border-left: 1.3em solid;
  border-left-color: inherit;
  border-right: none;
  position: absolute;
  left: 100%;
  top: 0;
  content: '';
}

.navigation-item+.navigation-item {
  margin-left: 1.5em;
}

[aria-current] {
  background: #499fe9;
  border-color: #499fe9;
  color: #edf9fe;
}

[aria-current]~.navigation-item {
  background: #eee;
  border-color: #eee;
  color: #999;
}

livetune avatar Nov 06 '19 15:11 livetune

demo

<nav aria-label="Breadcrumb">
  <ul class="steps-container">
    <li class="steps-item">
      <a class="steps-item__link" href="#">
        <span class="steps-item__title">规则说明</span>
      </a>
    </li>
    <li class="steps-item">
      <a class="steps-item__link" href="#">
        <span class="steps-item__title">参与活动</span>
      </a>
    </li>
    <li class="steps-item steps-item__active">
      <a class="steps-item__link" href="#" aria-current="page">
        <span class="steps-item__title">参与抽奖</span>
      </a>
    </li>
    <li class="steps-item">
      <a class="steps-item__link" href="#">
        <span class="steps-item__title">奖品发放</span>
      </a>
    </li>
    <li class="steps-item">
      <a class="steps-item__link" href="#">
        <span class="steps-item__title">查看结果</span>
      </a>
    </li>
  </ul>
</nav>

body {
  background-color: white;
  font-size: 16px;
}
.steps-container {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0;
  counter-reset: num;
}
.steps-item {
  display: inline-block;
  margin: 0 0.25rem 0 1.25rem;
  color: #edf9ff;
}
.steps-item__link {
  display: inline-block;
  padding: 0 0.625rem;
  line-height: 2.5rem;
  color: currentColor;
  background-color: currentColor;
  text-decoration: none;
  font-size: 0.875rem;
  white-space: nowrap;
  vertical-align: top;
}
.steps-item__link::before {
  content: '';
  position: absolute;
  display: inline-block;
  margin: 0 0 0 -1.875rem;
  border: 1.25rem solid currentColor;
  border-left-color: transparent;
  border-right: none;
}
.steps-item__link::after {
  content: '';
  position: absolute;
  display: inline-block;
  margin: 0 0 0 0.625rem;
  border: 1.25rem solid transparent;
  border-left-color: currentColor;
  border-right: none;
}
.steps-item:first-child .steps-item__link::before {
  border-left-color: currentColor;
}
.steps-item__title {
  font-family: sans-serif;
  font-weight: bold;
  color: #45b1ed;
}
.steps-item__title::before {
  content: counter(num) '-';
  counter-increment: num;
}
/** 进行状态变换 */
.steps-item__active,
.steps-item:hover {
  color: #48b2ed;
}
.steps-item__active .steps-item__title,
.steps-item:hover .steps-item__title {
  color: #fff;
}
.steps-item__active ~ .steps-item {
  color: #ebedf0;
}
.steps-item__active ~ .steps-item .steps-item__title {
  color: #9fa0a0;
}

Despair-lj avatar Nov 06 '19 17:11 Despair-lj

demo

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

        * {
            padding: 0;
            margin: 0;
        }

        ol, li {
            list-style: none;
        }

        ol {
            margin: 5rem;
        }

        ol > li {
            float: left;
            background-color: #EDF9FF;
            padding: 1rem 1rem 1rem 2rem;
            color: #009fe9;
            text-align: center;
            cursor: pointer;
            clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0% 100%, 20% 50%);
            margin-left: -1rem;
            margin-top: 1rem;
        }
        ol > li:hover{
            background-color: #009fe9;
            color: #fff;
        }
        ol > li:first-child{
            padding-left: 1rem;
            clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0% 100%);
        }
        ol > li.now{
            background-color: #009fe9;
            color: #fff;
        }
        ol > li.now~li{
            background-color: #EBEDF0;
            color: #8c8c8c;
        }

guqianfeng avatar Nov 07 '19 07:11 guqianfeng

demo

关于无障碍访问这块真是了解的太少了，需要好好补一补；

clip-path在IE上面的兼容性有点惨不忍睹……

<nav class="demo" role="navigation">
  <li class="item item-step" aria-label="1-规则说明" tabindex="1">1-规则说明
  <li class="item item-step" aria-label="2-参与活动" tabindex="2">2-参与活动
  <li class="item item-active" aria-label="3-参与抽奖" tabindex="3">3-参与抽奖
  <li class="item" aria-label="4-奖品发放" tabindex="4">4-奖品发放
  <li class="item" aria-label="5-查看结果" tabindex="5">5-查看结果</li>
</nav>

.item {
  position: relative;
  display: inline-block;
  height: 40px;
  padding: 0 1em 0 24px;
  margin-right: 3px;
  line-height: 40px;
  color: #8c8c8c;
  background-color: #ebedf0;
}
.item::after {
  position: absolute;
  left: 100%;
  top: 0;
  content: '';
  border-style: solid;
  border-width: 20px 15px;
  border-color: transparent transparent transparent #ebedf0;
}
.item:not(:first-of-type) {
  clip-path: polygon(0 0, 15px 20px, 0 40px, calc(100% + 15px) 40px, calc(100% + 15px) 0, 0 0); /* 裁剪区域以外的部分全部不可见，包括after和before伪元素部分 */
}
.item-step {
  color: #009fe9;
  background-color: #edf9ff;
}
.item-step::after {
  border-left-color: #edf9ff;
}
.item-active {
  color: #fff;
  background-color: #009fe9;
}
.item-active::after {
  border-left-color: #009fe9;
}

xxf1996 avatar Nov 07 '19 10:11 xxf1996

demo

  <div>
      <a href="javascript:" aria-label="规则说明" class="step">1-规则说明</a>
      <a href="javascript:" aria-label="参与活动" class="step">2-参与活动</a>
      <a href="javascript:" aria-label="参与抽奖" class="step active">3-参与抽奖</a>
      <a href="javascript:" aria-label="奖品发放" class="step">4-奖品发放</a>
      <a href="javascript:" aria-label="查看结果" class="step">5-查看结果</a>
  </div>

body {
    background-color: #0e0e0e;
}

.step {
    color: #009fe9;
    text-decoration: none;
    display: inline-block;
    position: relative;
    line-height: 40px;
    padding: 0 20px;
}

.step.active {
    color: #fff;
}


.step::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 20px;
    background-color: #edf9ff;
    transform: skewX(40deg);
    z-index: -1;
}

.step::after {
    content: '';
    position: absolute;
    left: 0;
    top: 20px;
    right: 0;
    bottom: 0;
    background-color: #edf9ff;
    transform: skewX(-40deg);
    z-index: -1;
}

.step:first-child::before {
    right: -9px;
    background-color: transparent;
    transform: skew(0);
    border-bottom: 20px solid #edf9ff;
    border-left: 0 solid transparent;
    border-right: 17px solid transparent;
}

.step:first-child::after {
    right: -9px;
    background-color: transparent;
    transform: skew(0);
    border-top: 20px solid #edf9ff;
    border-left: 0 solid transparent;
    border-right: 17px solid transparent;
}

.step:hover {
    color: #fff;
}

.step:hover:not(:first-of-type)::before,
.step:hover:not(:first-of-type)::after {
    background-color: #009fe9;
}


.step:hover::before {
    border-bottom-color: #009fe9;
}

.step:hover::after {
    border-top-color: #009fe9;
}

.step.active::before,
.step.active::after {
    background-color: #009fe9;
}

.step.active~a {
    color: #8c8c8c;
    cursor: not-allowed;
}

.step.active~a::before {
    background-color: #ebedf0;
}

.step.active~a::after {
    background-color: #ebedf0;
}

rayj1993 avatar Nov 07 '19 11:11 rayj1993

有个很奇怪的现象，在最新chrome上面（低版本没有这个问题），设置了::first-line的color属性会导致inline-block的背景色失效，算不算bug?

确实如此

wingmeng avatar Nov 07 '19 14:11 wingmeng

在线demo 方法一：border 兼容 ie9+

.steps a {
  color: #009fe9;
  font-size: 14px;
  line-height: 40px;
  text-decoration: none;
  padding-left: 8px;
}
.steps li {
  float: left;
  margin-left: 0;
  height: 40px;
  padding: 0 2px 0 20px;
  list-style-type: none;
  border-right: 3px solid white;
  position: relative;
  background-color: #edf9ff;
}
.steps li:first-child {
  padding-left: 15px;
}
.steps li:nth-child(n+2)::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border-left: 20px solid white;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  content: " ";
}
.steps li::after {
  z-index: 1;
  position: absolute;
  top: 0;
  right: -20px;
  display: block;
  border-left: 20px solid #edf9ff;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  content: "";
  border-left-color: #edf9ff;
}
.steps li.current {
  background-color: #009fe9;
}
.steps li.current a {
  color: #fff;
}
.steps li.current::after {
  border-left-color: #009fe9;
}
.steps li.current~li {
  background-color: #EBEBF0;
}
.steps li.current~li a {
  color: #8c8c8c;
}
.steps li.current~li::after {
  border-left-color: #EBEBF0;
}

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

方法二：clip-path

.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>

JaimeCheng avatar Nov 07 '19 15:11 JaimeCheng

Demo https://codepen.io/crazyboy/pen/eYYrjvx

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

.process {
	list-style-type: none;
	padding-left: 0;
	--finishedBgColor: #edf9ff;
	--finishedFontColor: #009fe9;
	--activeBgColor: #009fe9;
	--activeFontColor: #ffffff;
	--unfinishedBgColor: #ebedf0;
	--unfinishedFontColor: #8c8c8c;
}
.process li {
	padding: 1em 1em 1em 2.2em;
	float: left;
	margin-right: 0.3em;
	margin-bottom: 0.5em;
	position: relative;
	font-weight: 900;
	font-family: '黑体';
	color: var(--finishedFontColor);
}
.process li.active {
	color: var(--activeFontColor);
}
.process li.active~li {
	color: var(--unfinishedFontColor);
}
.process li:first-child {
	background-color: var(--finishedBgColor);
}
.process li.active:first-child {
	background-color: var(--activeBgColor);
}
.process li::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0.7em;
	width: 100%;
	height: 50%;
	transform: skewX(40deg);
	z-index: -1;
	background-color: var(--finishedBgColor);
}
.process li.active::before {
	background-color: var(--activeBgColor);
}
.process li.active~li::before {
	background-color: var(--unfinishedBgColor);
}
.process li::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0.7em;
	width: 100%;
	height: 50%;
	transform: skewX(140deg);
	z-index: -1;
	background-color: var(--finishedBgColor);
}
.process li.active::after {
	background-color: var(--activeBgColor);
}
.process li.active~li::after {
	background-color: var(--unfinishedBgColor);
}

NeilChen4698 avatar Nov 07 '19 15:11 NeilChen4698

demo_linear_gradient demo_svg_mask(试了背景只用一个svg，calc兼容性不行,那就mask试试 )

纠结:不确定语义到底是导航还是步骤条。

我理解：

  • 导航，子元素都是链接
  • 步骤条，状态唯一，只是个表示进度的标题
<nav>
  <ol class="stepper">
    <li class="step-item">规则说明</li>
    <li class="step-item">参与活动</li>
    <li class="step-item" tabindex="0">参与抽奖</li>
    <li class="step-item">奖品发放</li>
    <li class="step-item">查看结果</li>
  </ol>
</nav>

/* zxx: 使用图形与题意不符，可以把SVG遮罩图形使用渐变绘制 */
.stepper{
  counter-reset: item;
  list-style-type: none;
  font-size: 13px;
  line-height: 3.077;
  margin:0;
  padding:0;
  white-space: nowrap;
}
.stepper .step-item:first-child{
  background: linear-gradient(#edf9ff,#edf9ff) 8px/calc(100% - 24px) no-repeat,url("data:image/svg+xml,%3Csvg width='32' height='80' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cpath d='m0,0l32,40l-32,40z' fill='%23edf9ff'/%3E%3C/svg%3E") right/auto 100% no-repeat;
}
.stepper .step-item[tabindex="0"]:first-child{
  background: linear-gradient(#009fe9,#009fe9) 8px/calc(100% - 24px) no-repeat,url("data:image/svg+xml,%3Csvg width='32' height='80' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cpath d='m0,0l32,40l-32,40z' fill='%23009fe9'/%3E%3C/svg%3E") right/auto 100% no-repeat;
}
.step-item:before { 
    content: counter(item) "-"; 
    counter-increment: item;
}
.step-item{
  display: inline-block;
  margin:0 -8px;
  padding: 0 32px;
  color: #009fe9;
  background: url("data:image/svg+xml,%3Csvg width='32' height='80' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cpath d='m0,0l32,0l0,80l-32,0l32,-40l-32,-40z' fill='%23edf9ff'/%3E%3C/svg%3E") left/auto 100% no-repeat,url("data:image/svg+xml,%3Csvg width='32' height='80' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cpath d='m0,0l32,0l0,80l-32,0l0,-80z' fill='%23edf9ff'/%3E%3C/svg%3E") 15px/calc(100% - 30px) no-repeat,url("data:image/svg+xml,%3Csvg width='32' height='80' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cpath d='m0,0l32,40l-32,40z' fill='%23edf9ff'/%3E%3C/svg%3E") right/auto 100% no-repeat;
  
}
.step-item[tabindex="0"]{
  color:white;
  background: url("data:image/svg+xml,%3Csvg width='32' height='80' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cpath d='m0,0l32,0l0,80l-32,0l32,-40l-32,-40z' fill='%23009fe9'/%3E%3C/svg%3E") left/auto 100% no-repeat,url("data:image/svg+xml,%3Csvg width='32' height='80' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cpath d='m0,0l32,0l0,80l-32,0l0,-80z' fill='%23009fe9'/%3E%3C/svg%3E") 15px/calc(100% - 30px) no-repeat,url("data:image/svg+xml,%3Csvg width='32' height='80' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cpath d='m0,0l32,40l-32,40z' fill='%23009fe9'/%3E%3C/svg%3E") right/auto 100% no-repeat;
}
.step-item[tabindex="0"]~.step-item{
  color:#8c8c8c;
  background: url("data:image/svg+xml,%3Csvg width='32' height='80' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cpath d='m0,0l32,0l0,80l-32,0l32,-40l-32,-40z' fill='%23ebedf0'/%3E%3C/svg%3E") left/auto 100% no-repeat,url("data:image/svg+xml,%3Csvg width='32' height='80' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cpath d='m0,0l32,0l0,80l-32,0l0,-80z' fill='%23ebedf0'/%3E%3C/svg%3E") 15px/calc(100% - 30px) no-repeat,url("data:image/svg+xml,%3Csvg width='32' height='80' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cpath d='m0,0l32,40l-32,40z' fill='%23ebedf0'/%3E%3C/svg%3E") right/auto 100% no-repeat;
}

Seasonley avatar Nov 07 '19 15:11 Seasonley

dome

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <ul class="guide-box">
    <li class="done">1-规则说明</li>
    <li class="done">2-参与活动</li>
    <li class="undeway">3-参与抽奖</li>
    <li>4-奖品发放</li>
    <li>5-参与结果</li>
   </ul>
</body>
</html>

css部分

.guide-box{
  height:40px;
  line-height:40px;
  list-style: none;
  color:#8e8e8e;
  padding:0;
  /*若需要不够宽换行  注释 display:flex;即可 */
  display:flex;
  font-size:14px;
  overflow: hidden;
}

.guide-box li{
  padding:0 10px 0 10px;
  margin-right: 18px;
  white-space: nowrap;
  background:#ebedf0;
  position:relative;
}

/* 三角 */
.guide-box li:before{
  content:'';
  position:absolute;
  width: 0;
  height: 0;
  right: -16px;
  border: solid transparent;
  border-width: 20px 0 20px 16px;
  border-left-color:#ebedf0;
  z-index:2;
}

/* 白线 */
.guide-box li:after{
   content: '';
    position: absolute;
    width: 0;
    height: 0;
    top: -3px;
    left: -18px;
    border: solid #ebedf0;
    border-width: 23px 0 23px 18px;
    border-left-color: transparent;
    z-index: 1;
}

.guide-box .done{
  color: #019fe9;
  background:#edf9ff;
}

.guide-box  .undeway{
  color:#fcfefe;
  background:#009fe9;
}
.guide-box .done:before{
  border-left-color:#edf9ff;
}
.guide-box .done:after{
  border-color: #edf9ff;
  border-left-color: transparent;
}
.guide-box .undeway:before{
  border-left-color:#009fe9;
} 

.guide-box .undeway:after{
  border-color: #009fe9;
  border-left-color: transparent;
}

juzhiqiang avatar Nov 08 '19 02:11 juzhiqiang

demo HTML

  <div class="container">
    <span class="pointer pointer-passBy z-index-5">1-规则说明</span>
    <span class="pointer pointer-passBy z-index-4">2-参与活动</span>
    <span class="pointer pointer-hover z-index-3">3-参与抽奖</span>
    <span class="pointer pointer-default z-index-2">4-奖品发放</span>
    <span class="pointer pointer-default z-index-1">5-查看结果</span>
  </div>

CSS

    .pointer {
      position: relative;
      display: inline-block;
      padding: 0 30px;
      height: 40px;
      cursor: pointer;
      text-align: center;
      line-height: 40px;

    }

    .pointer:not(:first-child):after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      border-left: 20px solid white;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
    }

    .pointer:before {
      position: absolute;
      right: -20px;
      bottom: 0;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
    }


    /* 路过的样式 */
    .pointer-passBy {
      color: #009FE9;
      background: #EDF9FF;
    }

    .pointer-passBy:before {
      content: "";
      border-left: 20px solid #EDF9FF;
    }



    /* 鼠标移入的样式 */
    .pointer-hover {
      color: white;
      background: #009FE9;
    }

    .pointer-hover:before {
      content: "";
      border-left: 20px solid #009FE9;
    }

    /* 默认样式  */
    .pointer-default {
      color: #A7A7A9;
      background: #EBEDF0;
    }

    .pointer-default:before {
      content: "";
      border-left: 20px solid #EBEDF0;
    }

    /* 设置层级 */
    .z-index-5 {
      z-index: 5;
    }

    .z-index-4 {
      z-index: 4;
    }

    .z-index-3 {
      z-index: 3;
    }

    .z-index-2 {
      z-index: 2;
    }

    .z-index-1 {
      z-index: 1;
    }

zengqingxiao avatar Nov 08 '19 08:11 zengqingxiao

demo

<ul>
    <li class="arrow next">1-规则说明</li>
    <li class="pre arrow next">2-参与活动</li>
    <li class="pre arrow next active">3-参与抽奖</li>
    <li class="pre arrow next unfinished">4-奖品发放</li>
    <li class="pre arrow next unfinished">5-查看结果</li>
</ul>

ul, li {
    margin: 0;
}
li {
    list-style: none;
    display: inline-block;
}
.arrow {
    padding: 20px;
    background-color: #edf9ff;
    color: #38b1ed;
    position: relative;
}
.arrow + .arrow {
    margin-left: 26px;
}
.arrow::before {
    content: '';
    display: block;
    position: absolute;
    transform: translate(-100%, 0);
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-width: 31px 0 31px 27px;
    border-color: #edf9ff #edf9ff #edf9ff #edf9ff;
    border-style: solid;
}
.arrow::after {
    content: '';
    display: block;
    position: absolute;
    transform: translate(100%, 0);
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-width: 31px 0 31px 27px;
    border-color: transparent transparent transparent #edf9ff;
    border-style: solid;
}
.arrow.active {
    background-color: #009fe9;
    color: white;
}
.arrow.pre::before {
    border-width: 31px 0 31px 27px;
    border-color: #edf9ff transparent #edf9ff transparent;
}
.arrow.pre::after {
    border-color: transparent transparent transparent #edf9ff;
}
.arrow.active.pre::before {
    border-color: #009fe9 transparent #009fe9 transparent;
}
.arrow.active.pre::after {
    border-color: transparent transparent transparent #009fe9;
}
.arrow.unfinished.pre::before {
    border-color: #ebedf0 transparent #ebedf0 transparent;
}
.arrow.unfinished.pre::after {
    border-color: transparent transparent transparent #ebedf0;
}
.arrow.unfinished {
    background-color: #ebedf0;
    color: #999999;
}

frankyeyq avatar Nov 08 '19 08:11 frankyeyq

demo

<div role="steps" aria-stepnow="3-规则声明">
  <span class="step-item is-finish" aria-step="规则声明">1-规则声明</span>
  <span class="step-item is-finish" aria-step="参与活动">2-参与活动</span>
  <span class="step-item is-process" aria-step="参与抽奖">3-参与抽奖</span>
  <span class="step-item is-wait" aria-step="奖品发放">4-奖品发放</span>
  <span class="step-item is-wait" aria-step="查看结果">5-查看结果</span>
</div>

.step-item{
  margin-left: -30px;
  display: inline-block;
  padding: 25px 55px; 
  font-size: 16px;
  font-weight: 500;
  clip-path: polygon(0% 0%, calc(100% - 30px) 0%,100% 50%,calc(100% - 30px) 100%, 0% 100%, 30px 50%);
}
.step-item:first-child{
  margin-left: 0;
  clip-path: polygon(0% 0%, calc(100% - 30px) 0%,100% 50%,calc(100% - 30px) 100%, 0% 100%);
}
.step-item:last-child{
 clip-path: polygon(0% 0%, 100% 0%,100% 100%, 0% 100%, 30px 50%);
}
.step-item.is-finish{
  background-color: #edf9ff;
  color: #009fe9;
}
.step-item.is-process{
  background-color: #009fe9;
  color: #edf9ff;
}
.step-item.is-wait{
  background-color: #ecedf0;
  color: #8c8c8c;
}

asyncguo avatar Nov 08 '19 10:11 asyncguo

demo

<ul class="flow">
    <li class="flow-item flow-item--active">1-规则说明</li>
    <li class="flow-item flow-item--active">2-参与活动</li>
    <li class="flow-item flow-item--curr">3-参与抽奖</li>
    <li class="flow-item flow-item--inactive">4-奖品发放</li>
    <li class="flow-item flow-item--inactive">5-查看结果</li>
</ul>

.flow{
    overflow: hidden;
    display: flex;
    margin-top: 10px;
    padding: 0;
}
.flow-item {
    position: relative;
    width: 120px;
    height: 30px; 
    list-style: none;
    line-height: 30px;
    margin-left: 6px;
    padding: 12px;
    text-align: center;
    font-size: 16px;
    color: #fff;
}
.flow-item:first-child{
    box-shadow: -50px 0 rgb(233,249,255), inset 50px 0 rgb(233,249,255);
}
.flow-item:before {
    z-index: -1;
    position: absolute;
    content: '';
    top: 0; 
    left: 0;
    width: 100%;
    height: 50%; 
    background: rgb(0,162,234);
    transform: skew(35deg);
}
.flow-item:after {
    z-index: -1;
    content: '';
    position: absolute;
    top: 50%; 
    left: 0;
    width: 100%;
    height: 50%; 
    background: rgb(0,162,234);
    transform: skew(-35deg);
}
.flow-item--active{
    color: rgb(0,162,234);
}
.flow-item--active:before,
.flow-item--active:after{
    background: rgb(233,249,255);
}
.flow-item--inactive{
    color: rgb(140,140,140);
}
.flow-item--inactive:before,
.flow-item--inactive:after{
    background: rgb(234,237,240);
}
.flow-item--curr{
    color: #fff;
}
.flow-item--curr:before,
.flow-item--curr:after{
    background: rgb(0,162,234);
}

kuikuiGe avatar Nov 08 '19 14:11 kuikuiGe

css有点菜，中规中矩的实现。 地址

/*zxx: 实现不错哟~*/
<style>
body {
    font-size: 16px;
}

.step {
    position: relative;
    display: inline-block;
    line-height: 3rem;
    padding: 0 1.5rem;
    margin-left: 1.5rem;
    color: #57bdf0;
    background: #edf9ff;
}

.step::before {
    position: absolute;
    content: '';
    left: -1.5rem;
    border-top: 1.5rem solid #edf9ff;
    border-left: 1.5rem solid transparent;
    border-bottom: 1.5rem solid #edf9ff;
}

.step::after {
    position: absolute;
    content: '';
    right: -1.5rem;
    border-top: 1.5rem solid transparent;
    border-left: 1.5rem solid #edf9ff;
    border-bottom: 1.5rem solid transparent;
}

.step:first-child::before {
    border-color: #edf9ff;
}

.step.active {
    color: #fff;
    background: #039fe9;
}

.step.active::before {
    border-top-color: #039fe9;
    border-bottom-color: #039fe9;
}

.step.active::after {
    border-left-color: #039fe9;
}

.step.active ~ .step {
    color: #9b9c9d;
    background: #ebedf0;
}

.step.active ~ .step::before {
    border-top-color: #ebedf0;
    border-bottom-color: #ebedf0;
}

.step.active ~ .step::after {
    border-left-color: #ebedf0;
}
</style>

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

silverWolf818 avatar Nov 08 '19 14:11 silverWolf818

demo

.navbox{
  float: left;
  display:flex;
 direction: rtl;
}
.navbox a{
  direction: ltr;
  display: flex;
  height: 80px;
  align-items: center;
  font-size:24px;
  color:#949494;
  text-decoration: none;
}
.navbox a span{
  display: flex;
  align-items: center;
  height: 80px;
  background: #ebedf0;
  padding: 0 25px 0 15px;
}
.navbox a i{
  position: relative;
  display:flex;
  width: 0;
  height: 0;
  border-width:40px 6px 40px 40px;
  border-style:solid;
  border-color: transparent transparent transparent #ebedf0;
}
.navbox a i::after{
  content:"";
  position:absolute;
  top:-40px;
  right:-6px;
  display: block;
  border-width:40px 0px 0px 40px;
  border-style:solid;
  border-color:#ebedf0 transparent transparent transparent;
}
.navbox a i::before{
  content:"";
  position:absolute;
  bottom:-40px;
  right:-6px;
  display: block;
  border-width:0px 0px 40px 40px;
  border-style:solid;
  border-color:transparent transparent #ebedf0 transparent;
}
.navbox a:first-child i::before{
  border:0;
}
.navbox a:first-child i::after{
  border:0;
}
.navbox a:last-child span{
  padding-left: 30px;
}
a:hover~a span{
   background: #edf9ff  !important;
   color:#05a1ea  !important;
}
a:hover~a i{
  border-color: transparent transparent transparent #edf9ff  !important;
}
a:hover~a i::before{
  border-color:transparent transparent #edf9ff transparent !important;
}
a:hover~a i::after{
  border-color:#edf9ff transparent transparent transparent !important;
}
a:hover+a i::before{
  border-color:transparent transparent #009fe9 transparent  !important;
}
a:hover+a i::after{
  border-color:#009fe9 transparent transparent transparent  !important;
}
a:hover i{
  border-color: transparent transparent transparent #009fe9  !important;
}
a:hover span{
   background: #009fe9  !important;
   color:#ffffff  !important;
}
a.active~a span{
   background: #edf9ff;
   color:#05a1ea;
}
a.active~a i{
  border-color: transparent transparent transparent #edf9ff;
}
a.active~a i::before{
  border-color:transparent transparent #edf9ff transparent;
}
a.active~a i::after{
  border-color:#edf9ff transparent transparent transparent;
}
a.active+a i::before{
  border-color:transparent transparent #009fe9 transparent;
}
a.active+a i::after{
  border-color:#009fe9 transparent transparent transparent;
}
a.active i{
  border-color: transparent transparent transparent #009fe9;
}
a.active span{
   background: #009fe9;
   color:#ffffff;
}

<nav class="navbox">
  <a href="#"><span>5-查看结果</span><i></i></a>
  <a href="#"><span>4-奖品发放</span><i></i></a>
  <a href="#" class="active"><span>3-参与抽奖</span><i></i></a>
  <a href="#"><span>2-参与活动</span><i></i></a>
  <a href="#"><span>1-规则说明</span><i></i></a>
</nav>

sghweb avatar Nov 08 '19 14:11 sghweb

demo

<div class="step-list">
  <input type="radio" name="step" id="step-1">
  <label class="step-item" for="step-1">1-规则说明</label>
  <input type="radio" name="step" id="step-2">
  <label class="step-item" for="step-2">2-参与活动</label>
  <input type="radio" name="step" id="step-3" checked>
  <label class="step-item" for="step-3">3-参与抽奖</label>
  <input type="radio" name="step" id="step-4">
  <label class="step-item" for="step-4">4-奖品发放</label>
  <input type="radio" name="step" id="step-5">
  <label class="step-item" for="step-5">5-查看结果</label> 
</div>

.step-list {
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}
.step-item {
  line-height: 3em;
  height: 3em;
  position: relative;
  display: inline-block;
  padding: 0 10px;
  color: #009fe9;
  background: #edf9ff;
  margin: 5px 0;
  margin-right: 1.6em;
  overflow: visible;
  border: none;
  outline: none;
  cursor:pointer;
}
.step-item:after {
  content: '';
  position: absolute;
  left: 100%;
  top: 0;
  border-top: 1.5em solid transparent;
  border-left: 1.4em solid #edf9ff;
  border-bottom: 1.5em solid transparent;
}
.step-item:not(:nth-of-type(1)):before {
  content: '';
  position: absolute;
  right: 100%;
  top: 0;
  border-top: 1.5em solid #edf9ff;
  border-left: 1.4em solid transparent;
  border-bottom: 1.5em solid #edf9ff;
}
input[type=radio][name=step] {
  position: absolute;
  opacity: 0;
}
input[name=step]:checked + .step-item {
  color: #fff;
  background: #009fe9;
}
input[name=step]:checked + .step-item:after {
  border-left-color: #009fe9;
}
input[name=step]:checked + .step-item:before {
  border-top-color: #009fe9;
  border-bottom-color: #009fe9;
}
input[name=step]:checked + .step-item ~ .step-item {
  color: #8e8e8e;
  background:#EBEDF0;
}
input[name=step]:checked + .step-item ~ .step-item:after {
  border-left-color: #EBEDF0;
}
input[name=step]:checked + .step-item ~ .step-item:before {
  border-top-color: #EBEDF0;
  border-bottom-color: #EBEDF0;
}

zy017 avatar Nov 08 '19 15:11 zy017

本期要点：

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

zhangxinxu avatar Nov 09 '19 02:11 zhangxinxu