一、 前言

今天突发奇想，想看看css能做出点什么玩意。就在网上找了找，最后觉得实现一个渐变的三角形。

先来个效果图给jym看看。

（免费的gif帧数有限，凑合看凑合看）

咋样，看上去效果还不错吧，那这种效果是怎么实现的呢？

下面我们一起来看看吧。

二、 实现原理解析

1、整体思路

第一步、创建一个正方形，色彩是渐变的，配合动画实现动态渐变
第二步、扣出空心三角形的形状
第三步、添加光影效果，显得不那么干巴

2、圆锥渐变conic-gradient

定义和用法

conic-gradient() 函数将圆锥渐变设置为背景图像。

圆锥渐变是颜色过渡围绕中心点旋转的渐变。

如需创建圆锥渐变，您必须至少定义两个色标。

例子如下：

  background: conic-gradient(from 0deg, hsl(226, 71%, 54%), hsl(157, 87%, 53%), hsl(226, 71%, 54%));

到这里，我们就完成第一步的前半部分了，接下来只要配合动画，让渐变转起来，就能获取动态数据。

3、镂空方式

本文提供两种方式，看个人理解选用其中一种就行。

a、 cilp-path剪出镂空三角形

利用cilp-path构建空心三角形，只要cilp-path的路径是闭合的，是可以实现空心三角形的，如下示例，

clip-path: 
    polygon(
    50% 0%,
    0% 100%,
    8% 100%,
    50% 15%,
    88% 93%,
    7% 93%,
    7% 100%,
    100% 100%
);

大致的顺序就是上述图标出的数字，

polygon是多边形的意思，默认左上角是0% 0%， 右下角是100% 100% ，jym构建一下二维坐标系，拿笔在纸上画一下，清楚得多了。

这里也附上了利用cilp-path实现的css代码，jym可以直接调试效果看看。

b、 mask实现镂空三角形

实现思路： 先用cilp-path剪出一个实心三角形，然后利用mask，三个mask，来遮盖掉中心的部分。

  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, 100px 0, 0 190px;
  mask-size: 100px 190px, 100px 190px, 100% 10px;
  mask-repeat: no-repeat;

mask

本文用线性渐变来勾勒出现遮罩图形，还有其他方式，可自行参考 mdn文档

这里加些本文的mask遮罩图形图解，便于各位理解。

这里加了3个区域的mask遮罩图形，如图所示。

配合linear-gradient渐变，0-55%之间是可视区域，55%-100%是透明区域，第三个遮罩区域，我们是全显示的。

我们一开始就已经用cilp-path画出实心三角形了，跟图中的粉色线刚刚好是重合的，这样从图中就可以看出有个镂空三角形的模样了。

mask-position

用于定义遮罩的位置, 支持多属性值,逗号隔开，数量跟mask对应，例如：mask-position: 0 0, center

mask-size

用于指定遮罩图像的大小, 支持多属性值,逗号隔开，数量跟mask对应, 例如：mask-size: 50%, 25%, 25%。

mask-repeat

设置遮罩图像的重复方式。

4、光影drop-shadow

filter滤镜，添加光影drop-shadow，就不会那么干巴了。

该属性支持多个光影，drop-shadow(x偏移，y偏移，模糊大小，色值)。

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

需要注意的是，这里的光影css，我是加到了三角形的父级，”area”那里去了，不然没有效果。

5、CSS @Property

本文示例中使用了property自定义属性，也是我第一次用吧，我还专门查了查这个属性的定义和用法。

其实可以算是实现了一个css变量，可以配合animation，实现更加便利的动态效果。
从我的两份代码可以看出，还是利用cilp-path的那份，让人理解起来会更容易些。

整体思路就非常清晰：
conic-gradient负责生成渐变图像，然后通过animation来改变渐变图像的色彩角度，形成一个动态的旋转效果。cilp-path负责扣图形出来，各司其职，最后用drop-shadow添加点光影进行点缀。

@Property自定义属性，目前各浏览器支持如下，基本上和Firefox同内核的浏览器，都是不支持的

/*
@property 自定义变量的名称（需要--开头）{
syntax: '语法结构';
inherits: '是否允许该属性被继承';
    initial-value: '初始值';
}
*/


@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

如果觉得兼容性不够，当然也是利用伪元素进行实现，用伪元素实现出同样的图形，然后进行 transform: rotate() 旋转，效果一样,具体实现我也贴在这里了，jym可以调试看看。

下面动图里旋转的部分就是伪元素，通过伪元素的旋转，带动色彩的旋转，从而形成炫彩三角形。

需要注意的是，伪元素应该比原元素要大，而且通过定位来确保，旋转的时候，能完全包裹住我们要炫彩的图像，如本文的三角形。

三、小结

css属性还是很神奇，不同的组合就能产生出各种奇妙的效果，以往这种酷炫的效果，我一般都是等ui直接给我动态图，我直接往项目里一贴就完事了，现在我可能会自己琢磨琢磨，会发现一片新的天地。

ps: 我是地霊殿__三無，希望能帮到你。

原文链接：https://juejin.cn/post/7346865556328857615 作者：地霊殿__三無