最近有朋友问我，在某网站看到一个用SVG制作的炫彩三角边框动画[1]，就问能不能用CSS实现：很有意思的一个动画效果立马让我想起了我在CSS异想天开的边框动画[2]一文中介绍的边框动画，非常相似：核心是使用了conic-gradient，然后在图案的中心区域通过叠加一个小的形状来实现面具。但是这个三角形动画有两个难点：1.整个图形是一个三角形。在CSS中，我们可以很容易地实现矩形和圆形，但是三角形在这里无疑要复杂得多。2.整个边框也伴随着阴影，边框两边还是有阴影。这里看似不复杂，其实非常难。如果用上面的方法，通过覆盖和遮盖一个小图形，把图案的中心区域挖空，那么另一边的阴影是怎么来的呢？即使使用阴影，它也会被覆盖的内部图形遮挡。当然，CSS还是可以实现这个图形的。本文将讲解如何使用CSS实现上述彩色三角边框动画。通过角度渐变实现主体动画首先，我们还需要借助角度渐变conic-gradient来实现整个动画的主体。
@property--angle{语法：'
';继承：假的；初始值：0deg;}div{宽度：260px;高度：260px；背景：圆锥梯度（来自var(--angle)、hsl(162、100%、58%)、hsl(270、73%、53%)、hsl(162、100%、58%)）；动画：旋转3s无限线性;}@keyframes旋转{到{--angle:360deg;}}核心只是一个角度渐变图案，结合CSS@Property，让整个效果旋转：当然，如果你觉得CSS@Property不好理解或者担心兼容性问题，可以替换通过使用伪元素实现相同的图形，然后transform:rotate()旋转，效果是一样的。基于矩形的三角形就OK了。接下来，我们需要根据矩形得到三角形。对于外圈的三角形，我们可以通过clip-path进行裁剪，也很简单：div{width:260px;高度：260px；背景：圆锥梯度（来自var(--angle)、hsl(162、100%、58%)、hsl(270、73%、53%)、hsl(162、100%、58%)；动画：旋转3s无限线性；+clip-path:polygon(0100%,100%100%,50%0);}得到如下效果：这样，我们就得到了一个实心三角形。接下来，我们需要想办法把里面挖空。最简单的思路就是在中间叠加一个尺寸较小的图形，颜色要和背景色一样：完整代码可以点这里--CodePenDemo--PureCSSLinearTriangle[3]不过，这样做有一些好处。两个致命的问题：如果底色不是纯色而是渐变色，这个方法就会失败这样，镂空完成后，它的中心必须是透明的。因此，这里我们不得不使用mask。但是在这样的图形基础上用mask实现更小的三角形比较麻烦。我们相当于实现了这样一个镂空的三角形图形。原理图如下：这样一个图形，结合clip-path，可以得到一个三角形的边框图形，什么意思，我这里做了动图：左边是使用mask实现mask后的图形，右边是使用clip-path裁剪后的图形，将它们的效果叠加起来，实现了一个bordertriangle。当然，这里需要你对mask有更深入的掌握。需要使用遮罩来切割一个镂空的三角形图如下：OK，完整代码如下：@property--angle{syntax:'';继承：假的；初始值：0deg;}div{宽度：260px;高度：260px；背景：圆锥梯度（来自var(--angle)、hsl(162、100%、58%)、hsl(270、73%、53%)、hsl(162、100%、58%)；剪辑路径：多边形（0100%，100%100%，50%0）；蒙版：线性渐变（117deg，#00055%，透明55%，透明），线性渐变（-117deg，#00055%，透明55%，透明），线性渐变（#000，#000）；遮罩位置：00,130px0,0250px；遮罩尺寸：130px250px，130px250px，100%10px；掩码重复：不重复；动画：旋转3s无限线性;}@keyframes旋转{到{--angle:360deg;}}得到一个内在的镂空三角框：使用drop-shadow来增加光影。最后一步比较简单。由于上面的三角形已经是镂空的图形，可以直接使用drop-shadow给元素加上一层光影效果。但是，由于使用了clip-path，直接在原元素上添加的drop-shadow无法显示，这个很容易解决，我们只需要多设置一层结构，将drop-shadow添加到父元素： 