CSS make banner look like it comes from the background - css

Question

I'm trying to make it look like in the image.
This is what i have done so far:
But i cant figure out how to do the line so that it looks like the banner comes from behind the line.
My markup for the banner is this:
<div class="step-arrows">
<div class="top-line"></div>
<div class="box">
<div>1</div>
</div>
<div class="arrow"></div>
<div class="top-line"></div>
<div class="box">
<div>2</div>
</div>
<div class="arrow"></div>
<div class="top-line"></div>
<div class="box">
<div>3</div>
</div>
<div class="arrow"></div>
</div>
and this is the styles i have done so far:
.step-arrows {
margin-left: 20%;
}
.step-arrows .box {
background-color: #2E8074;
width: 100px;
height: 100px;
color: white;
text-align: center;
}
.step-arrows .box > div {
font-size: 80px;
}
.step-arrows .arrow {
width: 0px;
height: 0px;
border-top: 50px solid #2E8074;
border-left: 50.5px solid transparent;
border-right: 50.5px solid transparent;
margin-top: -1px;
}
I have tried to do it with box-shadow but i haven't been able to make it look very good :(
EDIT: (My last try)
.step-arrows .top-line {
width: 150px;
height: 2px;
margin-left: -25px;
z-index: 99;
position: absolute;
border-radius: 20px;
background-color: rgb(0, 0, 0);
-webkit-box-shadow: 0px 67px 12px 15px rgba(0,0,0,0.68);
-moz-box-shadow: 0px 67px 12px 15px rgba(0,0,0,0.68);
box-shadow: 0px 3px 9px 4px rgb(0, 0, 0);*/
}