CSS 步骤进度条

.wizard { margin: 0; padding: 0; overflow: hidden; font-size: 0; }

    .wizard li { font-size: 14px; list-style-type: none; display: inline-block; position: relative; margin: 0; padding: 0; text-align: center; line-height: 30px; height: 30px; background-color: #C3C3C3; }
        .wizard li > span { display: block; color: #FFFFFF; font-weight: bold; text-transform: uppercase; width: 150px; }

        .wizard li.done > span { color: #FFFFFF; background-color: #3c8dbc; }
        .wizard li > span::after,
        .wizard li > span::before { content: ""; display: block; width: 0; height: 0; position: absolute; top: 0; left: 0; border: solid transparent; border-left-color: #C3C3C3; border-width: 15px; }

        .wizard li > span::after { top: -5px; z-index: 1; border-left-color: white; border-width: 20px; }

        .wizard li > span::before { z-index: 2; }
        .wizard li.done + li > span::before { border-left-color: #3c8dbc; }

        .wizard li:first-child > span::after,
        .wizard li:first-child > span::before { display: none; }
        .wizard li:first-child i { display: block; height: 0; width: 0; position: absolute; top: 0; left: 0; border: solid transparent; border-width: 15px; }
        .wizard li:last-child i { display: block; height: 0; width: 0; position: absolute; top: 0; left: 0; border: solid transparent; border-left-color: white; border-width: 15px; }

        .wizard li:last-child i { left: auto; right: -15px; border-left-color: transparent; }

<ul class="wizard">
    <li class="done"><span>申请</span><i></i></li>
    <li class="done"><span>申请</span><i></i></li>
    <li class="done"><span>申请</span><i></i></li>
    <li class="done"><span>申请</span><i></i></li>
    <li class="done"><span>申请</span><i></i></li>
    <li class="done"><span>申请</span><i></i></li>
    <li><span>申请</span><i></i></li>
    <li><span>申请</span><i></i></li>
    <li><span>申请</span><i></i></li>
</ul>