步骤条样式

1.css样式

.stepDiv{
        width:1000px;
        height:50px;
        margin: 0 auto;
    }
    .stepOne{
        display: inline-block;
        width: 500px;
        font-size: 0;
        position: relative;
    }
    .stepOne div{
        display: inline-block;
        background: #ff5837;
        width: 475px;
        height:50px;
        vertical-align: text-bottom;
        font-size: 15px;
        color: #fff;
        line-height: 50px;
        text-align: center;
    }
    .stepOne span{
        display:inline-block;
        width:0;
        height:0;
        border-width:25px 0 25px 25px;
        border-style:solid;
        border-color:transparent transparent transparent #ff5837;
    }
    .stepOne p{
        position: absolute;
        color: #fff;
    }
    .stepTwo{
        display: inline-block;
        width: 495px;
        font-size: 0;
        position: relative;
        left: -20px;
    }
    .stepTwo div{
        display: inline-block;
        background: #f8f8f8;
        width: 445px;
        height:50px;
    }
    .stepTwo span{
        display:inline-block;
        width:0;
        height:0;
        border-width:25px 25px 25px 25px;
        border-style:solid;
        border-color:#f8f8f8 #f8f8f8 #f8f8f8 transparent;
        top:0px;
        left:0px;
    }

2.html

<div class="stepDiv">
      <div class="stepOne">
            <div>1.第一步</div>
            <span></span>
      </div>
      <div class="stepTwo">
            <span></span>
            <div>2.第二步</div>
      </div>
</div>