导航菜单

效果图：

Shopping Cart  

  Checkout  

  Payment  

 

 

CSS：

.cart-step{ margin-bottom:14px; overflow:hidden; }
.cart-step .item{ position:relative; float:left; width:306px; padding-right:23px; }
.cart-step .cart-step-title{ display:block; padding:8px 12px 8px 26px; background:#e8e8e8; font-size:18px; font-weight:900; }
.cart-step .cart-step-title:first-child{ padding-left:14px; }
.cart-step .checked .cart-step-title{ background:#130c0e; color:#FFF; }
.cart-step .cart-step-em-r,
  .cart-step .cart-step-em-l{ position:absolute; top: 0; width:0; height:0; border:17px solid transparent; transition:all .2s ease; -moz-transition:all .2s ease; -webkit-transition:all .2s ease; -o-transition:all .2s ease; }
.cart-step .cart-step-em-r{ right:-14px; border-left-width:20px; border-left-color:#e8e8e8; }
.cart-step .cart-step-em-l{ left:-2px; border-left-width:20px; border-left-color:#fff; }
.cart-step .checked .cart-step-em-r{ border-left-color:#130c0e;  }

HTML：

<div class="cart-step">
    <div class="item ">
        <a class="cart-step-title">Shopping Cart</a>
        <em class="cart-step-em-r"></em>
    </div>
    <div class="item checked">
        <em class="cart-step-em-l"></em>
        <a class="cart-step-title">Checkout</a>
        <em class="cart-step-em-r"></em>
    </div>
    <div class="item">
        <em class="cart-step-em-l"></em>
        <a class="cart-step-title">Payment</a>
        <em class="cart-step-em-r"></em>
    </div>
</div>

搞掂~