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

本篇文章给大家分享《如何用多个 DIV 和渐变实现动态时间轴效果？》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

绚丽的动态时间轴效果巧用多个 div 和渐变

解决难点：

如何实现动态时间轴效果，其中：

• 时间轴长度动态变化
• 时间轴默认呈现为水管状，进度区域渐变染色

实现思路：

• 使用多个 div 拼接组成时间轴
• 奇数 div 显示顶部和右侧边框，偶数 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;
}

效果展示：

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

延伸思考：

若时间轴只有一个弯，可以使用 conic-gradient 轻松实现。而当有多个弯时，可以通过拼接 conic-gradient 的方式实现。

到这里，我们也就讲完了《如何用多个 DIV 和渐变实现动态时间轴效果？》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！