I'm trying to create a progress bar , which is often displayed when debugging.
The problem is that the borders between the arrows are transparent, and all these elements must be scalable.
I think I could do this with JS , but would prefer a solution with CSS .
Help would be very helpful.
$bar-color: rgba(255, 255, 255, 0.2); $bar-active-color: rgba(255, 255, 255, 0.6); $arrow-size: 22px; body { background: linear-gradient(left, #803689, #5eb6e4); } .progress-nav { position: relative; font-size: 0; margin: 100px auto; width: 80%; max-width: 900px; // dummy border to display the width problem border: 1px solid red; li { position: relative; color: #fff; font-size: 12px; display: inline-block; width: 20%; margin-right: 48px; list-style: none; background: $bar-color; padding: $arrow-size 0; transition: background .5s, color .5s; span { position: absolute; width: 100%; top: 50%; left: 50%; transform: translateX(-33px) translateY(-35%); } &:before, &:after { content: ''; position: absolute; display: block; top: 0; transition: all .5s; } &:before { border: $arrow-size solid $bar-color; border-left-color: transparent; left: -$arrow-size*2; } &:after { border: $arrow-size solid transparent; border-left-color: $bar-color; right: -$arrow-size*2; } &:first-child:before { border: none; width: $arrow-size*2; height: $arrow-size*2; background: $bar-color; border-radius: 4px 0 0 4px; } &:last-child:after { border: none; right: -$arrow-size; width: $arrow-size; height: $arrow-size*2; background: $bar-color; border-radius: 0 4px 4px 0; } &.active, &:hover { background: $bar-active-color; color: #000; &:before { border-color: $bar-active-color; border-left-color: transparent; } &:after { border-left-color: $bar-active-color; } &:first-child:before, &:last-child:after { background: $bar-active-color; } } } } <ul class="progress-nav"> <li class="active"> <span>1. FOO</span> </li> <li> <span>2. BAR</span> </li> <li> <span>3. BAZ</span> </li> </ul> 
