Perspective shadows from semi-hexagonal shapes (like flags) - html

Question

The targeted design looks like this:
My markup and CSS can be seen in this JSFiddle: http://jsfiddle.net/n2bynh57/
HTML:
<div id="steps">
<ol class="para-small-color">
<span class="wedge"></span>
<li>
<div class="counter">1</div>
<div class="list-elem">
</div>
</li>
<li>
<div class="counter">2</div>
<div class="list-elem">
</div>
</li>
<span class="wedge"></span>
<li>
<div class="counter">3</div>
<div class="list-elem">
</div>
</li>
<li>
<div class="counter">4</div>
<div class="list-elem">
</div>
</li>
</ol>
</div>
CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#steps ol, #steps ul{
-padding-start: 0px;
-webkit-padding-start: 0px;
}
#steps ol>li:nth-child(2), #steps ol>li:nth-child(5) {
background-color: #e9e9e9;
}
#steps ol>li:nth-child(3), #steps ol>li:nth-child(6) {
margin-left: 5.6rem;
}
#steps ol>li, #steps ol>li ul li{
list-style: none;
}
#steps ol>li{
display: flex;
margin-left: 1.4rem;
}
.list-elem{
margin-left: 2rem;
}
.counter{
font: 400 4rem Arial;
padding: 10px 25px 10px 25px;
color: #a83443;
}
.wedge {
position: absolute;
display: inline-block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 25px 8px 0;
border-color: transparent #b0b0b0 transparent transparent;
}
#steps ol li:nth-of-type(1)>.counter, #steps ol li:nth-of-type(3)>.counter {
width: 100px;
height: 100px;
background: #E9E9E9;
position: relative;
text-align: center;
}
#steps ol li:nth-of-type(1)>.counter:after, #steps ol li:nth-of-type(3)>.counter:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid #E9E9E9;
}
I managed to get the semi-hexagonal shapes right and the corner flat shadow. But I'm not sure how the perspective flat shadows could be made. Using box-shadow doesn't seem to work right, because it cannot achieve the wedge-shaped perspective shadows. So, I suppose it might work with some border properties.

Answer 1

I think I found the solution. This is possible to achieve by creating the same elements again and placing the clones underneath them using z-indexed layers, then applying some transformations on these shadow-coloured shapes to make them look as if they are perspective shadows.
I will edit this post later to add the solution for reference, once I finish writing the code.
Solution: http://codepen.io/ciprianf/pen/epvvep