How to create Polyline by CSS and attach two elements by the line without use of SVG?

Question

Like shown above image. Two buttons positioned inside a table and the table acts like steps. If the first step finished then moved to the second. But the line should show like step1 to step2. How do I bend the line and attach the second button inside another element? Can anyone know how to do this?

Answer 1

Finally, I succeed. Here are the code below

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

Solution Screenshot,

Thanks, ;)