简单实现箭头面包屑

<!-- template -->
<div class="crumbsC4">
  <ul>
      <li class="first current">
          <div>1.申请退款</div>
      </li>
      <li class="second">
          <div>2.退款处理</div>
      </li>
      <li class="last">
          <div>3.退款完成</div>
      </li>
  </ul>
</div>



<!-- css-->
.crumbsC4 {
    margin: 15px;
    overflow: hidden;
    background-color: #CDDEED;

    li {
        float: left;
        position: relative;
        height: 33px;
        width: 160px;
        line-height: 32px;
        font-size: 12px;
        color: #333;
        margin-right: -19px;
        padding-right: 20px;
        background: url(//cbu01.alicdn.com/cms/upload/2011/272/980/89272_719516335.gif) right center no-repeat;

        div {
            padding-left: 24px;
        }

        &.first {
            z-index: 9;

            div {
                padding-left: 17px;
            }
        }

        &.last {
            z-index: 7;
            background: 0 0;
            margin-right: 0;
            padding-right: 0;
        }

        &.current {
            color: #FFF;
            font-size: 14px;
            font-weight: 700;
            background: url(//cbu01.alicdn.com/cms/upload/2011/372/980/89273_719516335.gif) right center no-repeat;

            div {
                background-color: #FF7300;
            }
        }
    }
}