巧用 CSS 实现炫彩三角边框动画

发布时间：2025-11-05 02:37:56 来源：创站工坊 作者：域名

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

很有意思的彩角一个动画效果，立马让我想起了我在 CSS 奇思妙想边框动画[2]

一文中介绍的边框边框动画，非常的动画类似：

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

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

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

当然，CSS 还是可以实现这个图形的，本文就将讲解如何使用 CSS 实现上述炫彩三角边框动画。

首先，我们还是需要借助角向渐变 conic-gradient 实现整个动画的主体。

syntax: ;

inherits: false;

initial-value: 0deg;

}

div {

width: 260px;

height: 260px;

background: conic-gradient(from var(--angle), hsl(162, 100%, 58%), hsl(270, 73%, 53%), hsl(162, 100%, 58%));

animation: rotate 3s infinite linear;

}

@keyframes rotate {

to {

--angle: 360deg;

}

核心就仅仅只是一个角向渐变图案，配合 CSS @Property，让整个效果旋转起来：

当然，如果这里觉得 CSS @Property 不好理解或者担心兼容性问题，可以替换成利用伪元素实现同样的图形，然后进行 transform: rotate() 旋转，效果一样。

OK，接下来，我们需要基于矩形图形得到三角形图形，对于外圈的三角形，我们可以通过 clip-path 切割得到，也非常的简单：

div {

width: 260px;

height: 260px;

background: conic-gradient(from var(--angle), hsl(162, 100%, 58%), hsl(270, 73%, 53%), hsl(162, 100%, 58%));

animation: rotate 3s infinite linear;

+ clip-path: polygon(0 100%, 100% 100%, 50% 0);

即可得到如下效果：

这样，我们就得到了一个实心的三角形。接下来需要先办法把内部给掏空。

最简单的思路就是，通过叠加一个小一号的IT技术网图形在中间，颜色和背景色一致即可：

完整的代码你可以戳这里 -- CodePen Demo -- Pure CSS Linear Triangle[3]

但是，这样做有两个致命问题：

这两个缺陷都是不可接受的，所以我们必须寻找真正能够镂空中间的方式，镂空完成后，它的中心得是透明的。

因此，这里我们得使用 mask。

不过使用 mask 基于这样一个图形再实现一个小一号的三角形是比较麻烦的，我们相当于要实现这样一个镂空三角形图形，示意图如下：

这样一个图形，配合 clip-path，就能得到一个三角形边框图形，啥意思呢，我这里制作了一个动图示意：

左边是利用 mask 实现遮罩后的图形，右边是源码下载利用 clip-path 切割后的图形，它们的效果叠加在一起，就能实现一个边框三角形。

当然，这里需要对 mask 掌握的比较深入，要使用 mask 切割一个内部镂空的三角形示意图如下：

OK，完整的代码是这样：

@property --angle {

syntax: ;

inherits: false;

initial-value: 0deg;

}

div {

width: 260px;

height: 260px;

background: conic-gradient(from var(--angle), hsl(162, 100%, 58%), hsl(270, 73%, 53%), hsl(162, 100%, 58%));

clip-path: polygon(0 100%, 100% 100%, 50% 0);

mask:

linear-gradient(117deg, #000 55%, transparent 55%, transparent),

linear-gradient(-117deg, #000 55%, transparent 55%, transparent),

linear-gradient(#000, #000);

mask-position: 0 0, 130px 0, 0 250px;

mask-size: 130px 250px, 130px 250px, 100% 10px;

mask-repeat: no-repeat;

animation: rotate 3s infinite linear;

}

@keyframes rotate {

to {

--angle: 360deg;

}

我们就得到了一个内部镂空的三角形边框了：

最后一步就比较简单了，由于上述三角形已经是一个镂空图形，这里直接使用 drop-shadow 给元素加上一层光影效果即可，不过由于使用了 clip-path，直接在原元素上添加的 drop-shadow 无法展示，这个好解决，我们只需要多套一层结构，将 drop-shadow 添加到父元素上即可：

@property --angle {

syntax: ;

inherits: false;

initial-value: 0deg;

}

.g-container {

width: 260px;

height: 260px;

filter: drop-shadow(0 0 5px hsl(162, 100%, 58%)) drop-shadow(0 0 10px hsl(270, 73%, 53%));

}

.g-triangle {

width: 260px;

height: 260px;

background: conic-gradient(from var(--angle), hsl(162, 100%, 58%), hsl(270, 73%, 53%), hsl(162, 100%, 58%));

clip-path: polygon(0 100%, 100% 100%, 50% 0);

mask:

linear-gradient(117deg, #000 55%, transparent 55%, transparent),

linear-gradient(-117deg, #000 55%, transparent 55%, transparent),

linear-gradient(#000, #000);

mask-position: 0 0, 130px 0, 0 250px;

mask-size: 130px 250px, 130px 250px, 100% 10px;

mask-repeat: no-repeat;

animation: rotate 3s infinite linear;

}

@keyframes rotate {

to {

--angle: 360deg;

}

这里又是一个小技巧，drop-shadow 是可以重复添加多个的，这里添加的两个阴影颜色就是 conic-gradient() 里设置的颜色，最终，我们就得到了题图所示效果：

完整的代码你可以戳这里 -- CodePen Demo -- Pure CSS Glowing Triangle[4]

了解上述完整代码，你可能还需要补齐一些基础 CSS 知识，可以按需点进去了解：

好了，本文到此结束，希望本文对你有所帮助 :)

[1]某个网站: https://fffuel.co/nnneon/

[2]CSS 奇思妙想边框动画: https://github.com/chokcoco/iCSS/issues/92

[3]CodePen Demo -- Pure CSS Linear Triangle: https://codepen.io/Chokcoco/pen/jOaLqjQ

[4]CodePen Demo -- Pure CSS Glowing Triangle: https://codepen.io/Chokcoco/pen/OJOjXVv

[5]奇妙的 CSS shapes(CSS图形): https://github.com/chokcoco/iCSS/issues/18

[6]CSS @property，让不可能变可能: https://github.com/chokcoco/iCSS/issues/109

[7]妙用 drop-shadow 实现线条光影效果: https://github.com/chokcoco/iCSS/issues/142

[8]Github -- iCSS: https://github.com/chokcoco/iCSS

相关文章