如何用多个 DIV 和渐变实现动态时间轴效果？

<div class="content">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

.content > div {
  height: 100px;
  width: 500px;
  border: none;
  border-top: 20px solid;
}

.content > div:nth-child(odd) {
  border-right: 20px solid red;
  border-image: linear-gradient(to right, red, green);
  border-image-slice: 1;
}

.content > div:nth-child(even) {
  border-left: 20px solid red;
  border-image: linear-gradient(to left, red, green);
  border-image-slice: 1;
}

+--------------------------------------------------------------------+
|                                                                    |
|____________________________________________________________________|   +-- --
|                                                                    |  |    |
|                                                                    |  |    |
|                                                                 +-- --   |
|                                                                 |      |
|__________________________________________________________________|      |