Title Flow bar in CSS

Question

i'm looking to preform this title div with css.

i've seen some websites to create the arrow, but encountered some issues with it. if some one has an idea of how to preform such thing, i will be grateful.

this is a flow chart arrow, where in step 1 the left side is the selected view, and in step 2 the middle is the selected and the left is already done.

Step 1

Step 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;
    }
}

}