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

---

如上图所示。位于桌子内部的两个按钮，桌子的作用类似于台阶。如果第一步完成，则移动到第二步。但是行应该显示为步骤1到步骤2。如何弯曲线条并将第二个按钮连接到另一个元素中？有人知道怎么做吗

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

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>

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