Step Indicator - New 0125

Step Indicator - New 0125

by pj_js15

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<!--<div class='mainContainer'>
    
    <div class='step'>
        <div class='step0'></div>
        <svg class='tail'>
            <g>
                <path d="M 3.5923606,0.88734668 32.374886,31.329976 2.5340273,62.100937 H 38.209511 V 0.88734668 Z" fill='#39C3AC' />
            </g>
        </svg>
        <svg class='head'>
            <g>
                <path d="M 0.38599386,0.52172913 29.729053,31.329976 0.38599386,61.534142 Z" fill='#39C3AC' />
            </g>
        </svg>
        <div class='text'>Personal</div>
    </div>
    
    <div class='step'>
        <svg class='tail'>
            <g>
                <path class='tail-current' d="M 3.5923606,0.88734668 32.374886,31.329976 2.5340273,62.100937 H 38.209511 V 0.88734668 Z" fill='#29235F' />
            </g>
        </svg>
        <svg class='head'>
            <g>
                <path d="M 0.38599386,0.52172913 29.729053,31.329976 0.38599386,61.534142 Z" fill='#29235F' />
            </g>
        </svg>
        <div class='text text-current'>Check Cover</div>
    </div>
    
    <div class='step'>
        <svg class='tail'>
            <g>
                <path d="M 3.5923606,0.88734668 32.374886,31.329976 2.5340273,62.100937 H 38.209511 V 0.88734668 Z" fill='#A091EE' />
            </g>
        </svg>
        <svg class='head'>
            <g>
                <path d="M 0.38599386,0.52172913 29.729053,31.329976 0.38599386,61.534142 Z" fill='#A091EE' />
            </g>
        </svg>
        <div class='text text-pending'>Medical</div>
    </div>
    
    <div class='step'>
        <svg class='tail'>
            <g>
                <path d="M 3.5923606,0.88734668 32.374886,31.329976 2.5340273,62.100937 H 38.209511 V 0.88734668 Z" fill='#A091EE' />
            </g>
        </svg>
        <svg class='head'>
            <g>
                <path d="M 0.38599386,0.52172913 29.729053,31.329976...

CSS

*{
    font-family: Arial;
}
.step0{
    background-color: #39C3AC;
    height: 29px;
    width: 32px;
    position: absolute;
    left: 0;
    margin-top: 6px;
}
.stepZ{
    background-color: #A091EE;
    height: 29px;
    width: 20px;
    position: absolute;
    right: -15px;
    margin-top: 6px;
    z-index: 1;
}
.step {
    display: flex;
    position: relative;
    margin-top: 20px;
    background: none;
    margin-left: 1px;
    float: left;
}

svg.head {
    height: 60px;
    width: 29px;
    order: 3;
    position: absolute;
    top: 5px;
    right: -28px;
    z-index: 1;
}
svg.tail {
    height: 30px;
    width: 19px;
    order: 1;
    margin-top: 5px;
}
svg.tail-current{
    background: #29235F;
}
.text {
    background: #39C3AC;
    text-align: center;
    flex-grow: 2;
    line-height: 3.2;
    height: 29px;
    margin-top: 6px;
    order: 2;
    z-index: 1;
    color: #FFF;
    text-transform: uppercase;
    font-weight: bold;
    padding: 0 25px;
    font-size: 10px;
}
.text-current{
    background: #29235F;
}
.text-pending{
    background: #A091EE;
}