CSS Arrow Step Indicator

HTML

<div class="barIndicator one selected"><i>5656756</i></div>
<div class="barIndicator two"><i></i></div>
<div class="barIndicator three"><i></i></div>

CSS

.barIndicator {
    position: relative;
    width: 100px;
    float: left;
}
.barIndicator i {
    width: 88px;   
    background: #c6a;
    display: block;
    float: left;
    opacity: .5;
}
.barIndicator.selected i {
    opacity: 1;
}
.one i::after {
    border: 5px solid rgba(255,255,255,0);
    border-left: 8px solid #c6a;
    position: absolute;
    right: 0px;
    content: '';
    
}


.two i::before {
    border: 5px solid #c6a;
    border-left: 8px solid rgba(255,255,255,0);
    position: absolute;
    left: -10px;
    content: '';
}
.two i::after {
    border: 5px solid rgba(255,255,255,0);
    border-left: 8px solid #c6a;
   
    position: absolute;
    right: 0px;
    content: '';
    
}


.three i::before {
    border: 5px solid #c6a;
    border-left: 8px solid rgba(255,255,255,0);
    position: absolute;
    left: -10px;
    content: '';
}