How can I create a CSS Progress bar with HOLLOW chevrons? - css

Question

I need to create a chevron style progress bar which I can do with solids but I would like to only have the active step solid and the inactive steps hollow. How can I do this? This is what I have so far. Any ideas how can I accomplish this?
<div class='grid'>
<div class='step'></div>
<div class='step'></div>
<div class='step'></div>
<div class='step'></div>
</div>
.grid {
width: 660px;
display: grid;
grid-auto-flow: column;
}
.step {
width: 100px;
height: 40px;
position: relative;
background: #002453;
color: white;
}
.step:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid white;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.step:before {
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid #002453;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
Above is a short example. Here is my Fiddle for the full CSS:
https://jsfiddle.net/6h1L87wm/4/

Answer 1

What you can do is just put a border around the grid that matches the arrows. I also changed the display to flex and set the justification to space-between to ensure the arrows go from start to finish.
.grid {
width: 660px;
display: flex;
justify-content: space-between;
border-radius: 10px 10px 0 0;
border: 1px solid #002453;
}
/* ----- step1 ----- */
.step1 {
width: 100px;
height: 40px;
position: relative;
background: #002453;
border-radius: 10px 0px 0px 0px;
color: white;
}
.step1:before {
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid #002453;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
/* ----- /step1 ----- */
/* ----- step2----- */
.step2 {
width: 100px;
height: 40px;
position: relative;
background: #002453;
color: white;
}
.step2:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid white;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.step2:before {
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid #002453;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
/* ----- /step2----- */
/* ----- step3---- */
.step3{
width: 100px;
height: 40px;
position: relative;
background: #002453;
color: white;
}
.step3:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid white;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.step3:before {
content: "";
position: absolute;
right: -20px;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid #002453;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
/* ----- /step3---- */
/* ----- step4 ----- */
.step4 {
width: 100px;
height: 40px;
position: relative;
background: #002453;
border-radius: 0px 10px 0px 0px;
color: white;
}
.step4:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid white;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
/* ----- /step4 ----- */
<div class='grid'>
<div class='step1'></div>
<div class='step2'></div>
<div class='step3'></div>
<div class='step4'></div>
</div>