steps

by Sparrow Squire

HTML

<div class="col12 form-steps">
    <div class="step completed">
        <span class="stage-number">1</span>
        <span class="step-wrapper"></span>
    </div>
    <div class="step active">
        <span class="stage-number">2</span>
        <span class="step-wrapper"></span>
    </div>
    <div class="step inactive">
        <span class="stage-number">3</span>
        <span class="step-wrapper"></span>
    </div>
</div>

CSS

.step {
    display: inline-block;
    height: 100px;
    margin-bottom: 55px;
    margin-right: 45px;
    position: relative;
    width: 150px;
}
    /* Arrowhead border */
    .step:after {
        content:"";
        width: 0;
        height: 0;
        position: absolute;
        right: -50px;
        border-left: 50px solid #fff;
    }

/* Arrow block and tail */
.active {
    background: green;
}
    .active:after {
        border-bottom: 50px solid yellow;
        border-top: 50px solid yellow;
    }

.completed {
    background: blue;
}
    .completed:after {
        border-bottom: 50px solid green;
        border-top: 50px solid green;
    }

.inactive {
    background: yellow
}
    .inactive:after {
        border-bottom: 50px solid yellow;
        border-top: 50px solid yellow;

    }

.step:last-of-type:after {
        border-bottom: 50px solid transparent;
        border-top: 50px solid transparent;
}

/* Arrowhead */
.step-wrapper {
     content:"";
     width: 0;
     height: 0;
     position: absolute;
     top: 2px;
     right: -48px;
     border-left: 48px solid yellow;
     border-bottom: 48px solid transparent;
     border-top: 48px solid transparent;
     z-index: 2
}

.completed .step-wrapper {
     border-left: 48px solid blue
}

.active .step-wrapper {
     border-left: 48px solid green
}

.stage-number {
    display:inline-block;
    color: #fff;
    font-size: 20px;
    text-align: center;
    width: 146px;  
    height: 100px;
}