CSS3实现步骤进度条效果

在软件前端页面设计中，步骤进度条在企业项目中，经常会应用到。制作的思路：

html:

    <div class="main">
      <div class="item">需求讨论</div>
      <div class="item">产品设计</div>
      <div class="item">开发制作</div>
      <div class="item">功能测试</div>
      <div class="item">竣工交付</div>
    </div>

绘制图形，通过在每个div.item的前、后通过::before和::after伪类绘制图形。

通过::before绘制图形，这个图形的宽度width我们设置为0，高度我们设置为0。通过边框让图形的形状显示出来。

通过::after绘制图形，这个图形的宽度width我们设置为0，高度我们设置为0。通过边框让图形的形状显示出来。

完整，css样式：

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        width: 100%;
        height: 100%;
      }
      body {
        min-height: 100vh;
        /* radial-gradient() 径向渐变 */
        background-image: radial-gradient(#fff, #f1f1f1);
      }
      .main {
        width: 80%;
        margin: 50px auto 0;
        /* outline: 1px dashed red; */
        overflow: hidden;
      }
      .main .item {
        width: 15%;
        float: left;
        height: 20px;
        line-height: 20px;
        background-color: #43a047;
        margin-right: 10px;
        text-align: center;
        color: #fff;
        font-size: 14px;
        font-family: "微软雅黑";
        /* 内边距 */
        padding: 5px 0 5px 8px;
        /* 相对定位 */
        position: relative;
        cursor: pointer;
      }
      /* 通过伪类::before绘制图形 */
      .item::before {
        content: "";
        width: 0;
        height: 0;
        /* 通过边框让图形显示出来 */
        border-style: solid;
        /* 边框的方向设置顺序： 上边框  右边框 下边框 左边框 ‘上 右 下 左’ */
        border-width: 15px 0 15px 10px;
        border-color: transparent transparent transparent #43a047;
        border-left-color: #fff;
        /* 绝对定位 */
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
      }

      /* 通过伪类::after绘制图形 */
      .item::after {
        content: "";
        width: 0;
        height: 0;
        /* 通过边框让图形显示出来 */
        border-style: solid;
        /* 边框的方向设置顺序： 上边框  右边框 下边框 左边框 ‘上 右 下 左’ */
        border-width: 15px 0 15px 10px;
        border-color: transparent transparent transparent #43a047;
        /* 绝对定位 */
        position: absolute;
        right: -10px;
        top: 0;
        z-index: 2;
      }
      /* 鼠标悬停 */
      .main .item:hover {
        background-color: #1565c0;
      }
      /* 伪类的叠加的写法----.item:hover::after  */
      .main .item:hover::after {
        border-left-color: #1565c0;
      }
    </style>