如何通过CSS创建折线并在不使用SVG的情况下通过线附加两个元素？

Question

如上图所示。两个按钮位于桌子内，桌子就像台阶一样。如果第一步完成，则移至第二步。但该行应显示为step1到step2。如何弯曲线条并将第二个按钮附加到另一个元素内？任何人都可以知道如何做到这一点？

Answer 1

最后，我成功了。以下是代码

HTML，

<tr class="text-center">
  <td class="col-xs-2">
    <div class="div1">
      <button class="btn btn-primary">Btn 1
      </button>
    </div>
  </td>
  <td class="col-xs-2">
    <div class="div2">
      <button class="btn btn-primary">Btn 2
      </button>
    </div>
  </td>
 <td class="col-xs-2">
    <div class="div3">
      <button class="btn btn-primary">Btn 3
      </button>
    </div>
  </td>
  <td class="col-xs-2">
    <div class="div4">
      <button class="btn btn-primary">Btn 4
      </button>
    </div>
  </td>
  <td class="col-xs-2">
    <div class="div5">
      <button class="btn btn-primary">Btn 5
      </button>
    </div>
  </td>
</tr>

CSS，

.div1 {
    padding-top: 10px;
    padding-bottom: 80px;
}

.div2 {
    padding-top: 30px;
    padding-bottom: 60px;
}

.div3 {
    padding-top: 50px;
    padding-bottom: 40px;
}

.div4 {
    padding-top: 70px;
    padding-bottom: 20px;
}

.div5 {
    padding-top: 90px;
}

.div1 button:after, .div2 button:after, .div3 button:after, .div4 button:after {
    width: 50px;
    height: 0;
    margin-top: 1px;
    border-radius: 0;
}
.div1 button:last-child:after, .div2 button:last-child:after, .div3 button:last-child:after, .div4 button:last-child:after {
    height: 10px;
    border-top: 1px solid #333;
    border-bottom: none;
    /* border-radius: 0 0 10px 0; */
    margin-top: -2px;
}
.div1 button:first-child:after, .div2 button:first-child:after, .div3 button:first-child:after, .div4 button:first-child:after {
    height: 10px;
    /* border-radius: 0 10px 0 0; */
}
.div1 button:after, .div2 button:after, .div3 button:after, .div4 button:after {
    content: "";
    width: 11px;
    border-top: 1px solid #333;
    position: absolute;
    right: -15px;
    top: 50%;
    margin-top: 1px;
}

.div5 button:before, .div2 button:before, .div3 button:before, .div4 button:before {
    content: "";
    width: 15px;
    border-top: none;
    border-bottom: 1px solid #333;
    position: absolute;
    left: -15px;
    top: 50%;
    margin-top: -10px;
}

.div5 button:last-child:before, .div2 button:last-child:before, .div3 button:last-child:before, .div4 button:last-child:before {
    height: 10px;
    /* border-radius: 0 0 0 10px; */
}
.div5 button:last-child:before, .div2 button:last-child:before, .div3 button:last-child:before, .div4 button:last-child:before {
    content: "";
    height: 50%;
    border-left: 1px solid #333;
    position: absolute;
    left: -16px;
}

.div1 button:last-child:after, .div2 button:last-child:after, .div3 button:last-child:after, .div4 button:last-child:after {
    content: "";
    height: 50%;
    border-right: 1px solid #333;
    position: absolute;
    right: -12px;
}

解决方案截图

谢谢， ;）