如何通过 CSS 实现炫目的彩色三角边框动画效果？

本文共计2249个文字，预计阅读时间需要9分钟。

最近有个小伙伴问我，在某个网站上看到一个使用SVG实现的炫彩三角形边框动画，问能否用CSS实现类似效果：非常有意境的一个动画效果，让我想起了我在CSS中实现奇思妙想边框动画的想法。

最近有个小伙伴问我，在某个网站看到一个使用 SVG 实现的炫彩三角边框动画，问能否使用 CSS 实现：

很有意思的一个动画效果，立马让我想起了我在 CSS 奇思妙想边框动画 一文中介绍的边框动画，非常的类似：

其核心就是利用了角向渐变（conic-gradient），然后将图案的中心区域通过覆盖遮罩一个小号的图形实现。

然而，这个三角形动画里有两个难点：

1. 整个图形是个三角形

在 CSS 中，我们可比较轻松的实现矩形与圆形，但是三角形这里无疑会棘手很多。

2. 整个边框还附带阴影，并且阴影还是在边框的两侧

这里看似不复杂，实则困难重重，如果采用上述的方法，将图案的中心区域通过覆盖遮罩一个小号的图形实现镂空，那么另外一侧的阴影如何产生？即便使用 drop-shadow，也会被覆盖的内侧图形给遮挡住。