I am currently working on creating a progress bar similar to those commonly found in checkout processes.
One issue I have encountered is that the borders between the arrows appear transparent, and the entire design needs to be responsive. So far, I have made some progress with it:
http://codepen.io/MrBambule/pen/rVBeoz
However, I am struggling to make the items of the progress bar expand to fill the entire width of their parent container (as indicated by the red border in the codepen) while still maintaining responsiveness.
I believe I could solve this with JavaScript, but I would prefer a CSS solution.
Any assistance on this matter would be greatly appreciated.
HTML
<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>
CSS
$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;
}
}
}
}