CSS中的标题流程栏

Question

我希望用css预先形成这个标题div。

我看过一些网站创建箭头，但遇到了一些问题。如果有人知道如何做这样的事情，我将不胜感激。

这是一个流程图箭头，其中在步骤1中左侧是选定的视图，在步骤2中，中间是选中的，左侧已经完成。

第1步

第2步

Answer 1

HTML：

<ol class="steps">
<li class="step1 current">Shipping</li>
<li class="step2">Payment</li>
</ol>

CSS：

ol.steps {
$line_height: 20px;
$padding: 9px;
$arrow_size: ($line_height + 2 * $padding)/2;
$max_li: 10;

list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Liberation Sans', Verdana, 'Verdana Ref', sans-serif;
font-size: 13px;
line-height: $line_height;
font-weight: bold;
counter-reset: li;

li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0;
    text-align: center;
    color: #3a3a3a;
    background: #dae4eb;
    position: relative;
    margin-left: 5px + 2 * $arrow_size;

    // Appended arrow.
    &:after {
        position: absolute;
        top: 50%;
        left: 100%;
        content: " ";
        height: 0;
        width: 0;
        pointer-events: none;
        border: solid transparent;
        border-left-color: #dae4eb;
        border-width: $arrow_size;
        margin-top: -$arrow_size;
    }

    // No prepended arrow on first item.
    &:first-child {
        margin-left: 0;
        span {
            padding: $padding;
            &:after {
                border: none;
            }
        }
    }

    // No appended arrow on last item.
    &:last-child {
        &:after {
            border-width: 0;
        }
    }

    span {
        display: block;
        padding: $padding ($padding + $arrow_size) $padding $padding;

        // Prepended arrow inset.
        &:after {
            position: absolute;
            top: 50%;
            right: 100%;
            content: " ";
            height: 0;
            width: 0;
            pointer-events: none;
            border: solid #dae4eb;
            border-left-color: transparent;
            border-width: $arrow_size;
            margin-top: -$arrow_size;
        }

        // "X)" numbering
        &:before {
            content: counter(li) ") ";
            counter-increment: li;
        }
    }
}

& > li {
    float: left;
}

li.current {
    color: #fff;
    background: #7b7b7b;

    // Appended arrow.
    &:after {
      border-left-color: #7b7b7b;
    }

    span {
        // Prepended arrow.
        &:after {
            border-color: #7b7b7b;
            border-left-color: transparent;
        }
    }
}

// For the overlapping to work, later LIs must have a lower z-index.
@for $i from 1 through $max_li {
    li.step#{$i} {
        z-index: $max_li - $i;
    }
}

}