redo of chevron

redo of chevron

by pj_js15

HTML

<div class='main-container'>
    <div class='chevron-container one'>
        <div class='step-bg-container'>
            <div class="step-bg"><p>PERSONAL</p></div>
        </div>
        <div class='step-container'>
            <div class="step"><p>PERSONAL</p></div>
        </div>
    </div>
    
    <div class='chevron-container two'>
        <div class='step-bg-container'>
            <div class="step-bg"><p>Chevron Current</p></div>
        </div>
        <div class='step-container'>
            <div class="step step-current">
                <p>Chevron Current</p>
            </div>
        </div>
    </div>
    
    <div class='chevron-container three'>
        <div class='step-bg-container'>
            <div class="step-bg"><p>Cover Check</p></div>
        </div>
        <div class='step-container'>
            <div class="step"><p>Cover Check</p></div>
        </div>
    </div>
    
    <div class='chevron-container'>
        <div class='step-container'>
            <div class="step-last"><p>Occupation</p></div>
        </div>
    </div>
    
</div>

CSS

* {
    font-family: Arial;
    font-weight: bold;
}
.main-container{
    display: flex;
    margin-left: 120px;
}
.chevron-container {
    position: relative;    
}

.chevron-container.one{
    z-index: 6;
}
.chevron-container.two{
    margin-left: 40px;
    z-index: 5;
}
.chevron-container.three{
    margin-left: 40px;
    z-index: 4;
}

.step-bg-container {
    position: absolute;
    //left: 6px;
    right: -4px;
}

.step.step-current{
    //background-color: #29235F;
}
.step.step-current {
    //background-color: #29235F;
}

.step {
    position: relative;
    //min-width: 150px;
    height: 60px;
    color: #FFFFFF;
    background-color: #39C3AC;
    text-align: center;
    line-height: 55px;
}

.step:after {
    content: "";
    position: absolute;
    left: 100%;
    top: 0px;
    width: 0px;
    height: 0px;
    border-top: 30px solid transparent;
    border-left: 30px solid #39C3AC;
    border-bottom: 30px solid transparent;
}

.step:before {
    content:"";
    position: absolute;
    right: 100%;
    top: 0;
    width: 40px;
    height: 60px;
    background-color: #39C3AC;
}

.step > p, .step-last > p, .step-bg > p{
    margin: 0;
    text-transform: uppercase;
    //padding-left: 35px;
}

.step-bg {
    position: relative;
    //min-width: 150px;
    height: 60px;
    background-color: #FFF;
    text-align: left;
    color: #FFF;
}

.step-bg:after {
    content: "";
    position: absolute;
    left: 100%;
    top: 0px;
    width: 0px;
    height: 0px;
    border-top: 30px solid transparent;
    border-left: 30px solid #FFF;
    border-bottom: 30px solid transparent;
}

.step-last {
    position: relative;
    min-width: 160px;
    height: 60px;
    color: #FFFFFF;
    background-color: #39C3AC;
    text-align: right;
    line-height: 55px;
}
.step-last > p{
    padding-right: 20px;
    padding-left: 45px;
}