Progess chart in CSS

Question

I am trying to build out this designed flow / progress chart in HTML/CSS/jQuery >

and can't think how to make the various stacked rows include a down arrow and then a reversed arrow based on the direction of the previous row with the steps running from right to left, then left to right, then right to left etc...

This all needs to work responsively... I have it working in a traditional way as per code example here -

function sortFlowChartArrows () {

/* clear prev arrow */

$('.arrow-right').each(function() {
$(this).remove();
});

$('.arrow-down').each(function() {
$(this).remove();
});


var windowWidthSize = $(window).width();

if (windowWidthSize >= 450) {

$('.projectStatusWrapper li:not(:last-child)').each(function() {
	$(this).after("<div class='arrow-right'></div>")
	
});

}

if (windowWidthSize <= 449) {

$('.projectStatusWrapper li:not(:last-child)').each(function() {
	$(this).after("<div class='arrow-down'></div>")
	
});

}

}

sortFlowChartArrows();

$(window).load(function() { sortFlowChartArrows(); });
$(window).resize(function() { sortFlowChartArrows(); });



/* PROJECT FLOW CHART - MAKE ALL LIS SAME HEIGHT */

function makeallflowchartLIsSameHeight () {

/* clear value */
$('.projectStatusWrapper li span').each(function() {
	$(this).css("height","")
})

var flowchartLIHeight = Math.max.apply( null, $(".projectStatusWrapper li").map( function () {
return $( this ).height();
}).get() );

console.log(flowchartLIHeight)

$('.projectStatusWrapper li span').each(function() {
	$(this).css("height",flowchartLIHeight+"px")
});
	
}


makeallflowchartLIsSameHeight();

$(window).load(function() { makeallflowchartLIsSameHeight(); });
$(window).resize(function() { makeallflowchartLIsSameHeight(); });

.projectStatusWrapper {
width: 100%;
float: left;	
}
.projectStatusWrapper ul {
margin: 0;
padding: 0;
}
.projectStatusWrapper li {
display: inline-table;
padding: 0;
margin: 0;
list-style: none;
border: 2px solid #74b4df;	


-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
margin: 0.5%;
font-weight: 400;
font-family: 'FFMarkWebProHeavy', Helvetica, Arial;

width: 17%;
vertical-align: middle;
text-align: center;
}
.projectStatusWrapper li span {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 15px 20px;
}
.projectStatusWrapper li.complete {
background-color: #74b4df;
color: #fff;
}
.arrow-right {
width: 0; 
height: 0; 
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
  
border-left: 15px solid #74b4df;
display: inline-block;
vertical-align: middle;
}
.arrow-left {
width: 0; 
height: 0; 
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
  
border-right: 15px solid #74b4df;
display: inline-block;
vertical-align: middle;
float: right;
}
.arrow-down {
width: 0; 
height: 0; 
border-left: 15px solid transparent;
border-right: 15px solid transparent;
  
border-top: 15px solid #74b4df;
display: inline-block;
vertical-align: middle;
text-align:center;
  
position: relative;
left: 43.5%;
margin-top: 5px;
margin-bottom: 5px;
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="projectStatusWrapper">

<ul>
<li class="complete">Step 1</li>
<li class="complete">Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
<li>Step 5</li>
<li>Step 6</li>
<li>Step 7</li>
<li>Step 8</li>
<li>Step 9</li>
<li>Step 10</li>
</ul>

</div>

Any ideas on how to make it work as per the design?

Answer 1

I had this quite simple idea that if we accept a fixed number of columns actually works. Basically I put the arrow in :after and use nth-child(6n+...) to define the arrow case. Certainly needs some fine tuning, anyway Codepen demo here

.projectStatusWrapper {
  width: 100%;
  float: left;
}

.projectStatusWrapper ul {
  margin: 0;
  padding: 0;
}

.projectStatusWrapper li {
  box-sizing: border-box;
  width: 30.5%;
  display: inline-block;
  list-style: none;
  border: 2px solid #74b4df;
  padding: 1%;
  margin: 1%;
  -webkit-border-radius: 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px;
  font-weight: 400;
  font-family: 'FFMarkWebProHeavy', Helvetica, Arial;
  position: relative;
  vertical-align: middle;
}

.projectStatusWrapper li.complete {
  background-color: #74b4df;
  color: #fff;
}

.projectStatusWrapper li:after {
  content: '';
  position: absolute;
  z-index: 1;
}

.projectStatusWrapper li:nth-child(6n+4),
.projectStatusWrapper li:nth-child(6n+5),
.projectStatusWrapper li:nth-child(6n+6) {
  float: right;
}

.projectStatusWrapper li:nth-child(6n+1):after,
.projectStatusWrapper li:nth-child(6n+2):after {
  top: 50%;
  right: -19px;
  transform: translateY(-50%);
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid tomato;
}

.projectStatusWrapper li:nth-child(6n+3):after,
.projectStatusWrapper li:nth-child(6n+6):after {
  left: 50%;
  bottom: -23px;
  transform: translateY(-50%);
  border-right: 15px solid transparent;
  border-top: 15px solid tomato;
  border-left: 15px solid transparent;
}

.projectStatusWrapper li:nth-child(6n+4):after,
.projectStatusWrapper li:nth-child(6n+5):after {
  top: 50%;
  left: -19px;
  transform: translateY(-50%);
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid tomato;
}

.projectStatusWrapper li:last-child:after {
  display: none;
}

<div class="projectStatusWrapper">
  <ul>
    <li class="complete">Step 1</li>
    <li class="complete">Step 2</li>
    <li>Step 3</li>
    <li>Step 4</li>
    <li>Step 5</li>
    <li>Step 6</li>
    <li>Step 7</li>
    <li>Step 8</li>
    <li>Step 9</li>
    <li>Step 10</li>
  </ul>
</div>