CSS使横幅看起来像来自背景

Question

我试图让它看起来像在图像中。

这是我到目前为止所做的：

但我无法弄清楚如何做这条线，看起来横幅来自线后。

我对横幅的标记是：

    <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>

这是我到目前为止所做的风格：

 .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;
  }

我试图用盒子阴影来做，但我还是不能让它看起来很好：（

编辑:(我的最后一次尝试）

.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);*/
 }