How to properly use CSS borders to visualize a value chain? - css

Question

I'm trying to create a CSS based value chain look-a-like:
After doing a little research I could find out, that I should use pseudo elements. So I managed to add them, but I can't make them overlap each other.
(Don't mind the colors, I'm using them for dev purposes.)
li {
display: inline-block;
background: #c3c3c3;
width: 70px;
padding: 13px 0 10px;
text-align: center;
font-family: sans-serif;
}
.chain-link {
position: relative;
}
.chain-link:after,
.chain-link:before {
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
top: 0;
}
.chain-link:after {
border-color: rgba(0, 0, 0, 0);
border-left-color: black;
border-width: 20px;
margin-left: 35px;
}
.chain-link:before {
border-color: rgba(0, 0, 0, 0);
border-left-color: white;
border-width: 20px;
margin-left: -35px;
}
.chain-link:first-child:before {
border-left-color: red;
}
.chain-link:last-child:after {
border-left-color: yellow;
}
<ul>
<li class="chain-link">10</li>
<li class="chain-link">20</li>
<li class="chain-link">30</li>
<li class="chain-link">40</li>
</ul>
Can anyone help? Any help appreciated.

Answer 1

demo - http://jsfiddle.net/7t9ruxgr/
li {
display: inline-block;
background: #c3c3c3;
width: 70px;
padding: 13px 0 10px;
text-align: center;
font-family: sans-serif;
text-align: center;
}
.chain-link {
position: relative;
}
.chain-link:after,
.chain-link:before {
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
top: 0;
}
.chain-link:after {
border-color: transparent transparent transparent #c3c3c3;
margin-left: 35px;
border-width: 20px 16px 21px 20px;
margin-left: 35px;
z-index: 2;
}
.chain-link:before {
border-color: rgba(0, 0, 0, 0);
border-left-color: white;
border-width: 20px;
margin-left: -35px;
}
<ul>
<li class="chain-link">10</li>
<li class="chain-link">20</li>
<li class="chain-link">30</li>
<li class="chain-link">40</li>
</ul>