纯CSS实现圆角渐变三角形

通过伪类元素::after,::before实现圆角、变换、旋转、渐变实现镂空三角形，再通过改变宽度填充镂空部分，最后渐变颜色色值取半及调整渐变方向。

一、背景

由于该三角形为品牌设计元素之一，在多个页面均需要展示数个“大小不一 & 角度各异” 的 渐变圆角三角形 。考虑加载的图片数量过多，想尝试用纯css来实现。

border实现三角形

渐变圆角三角形

二、分析思路

【方案一】

用 border 实现三角形

border实现三角形效果图jie

结论：

1.不是等边三角

2.不是圆角

3.border-color 无法设置渐变颜色

【方案二】

用 圆角矩形 + skew变换

实现效果

结论：

1.满足等边三角形

2.满足渐变问题

3.无法解决圆角问题

三、解决方案

【方案三】

用三个圆角矩形组合成三角形。参考【圆角镂空三角形】

圆角镂空三角形

在这个基础上的衍生图形有：

衍生图形

最后一个图形就是我们需要的圆角渐变三角形啦~

这里需要注意的是渐变的方向和色值

三条边的渐变方向都是蓝色箭头所指方向。而蓝色框选的一条边的渐变色值边界值需要取另外两条边的渐变色值的中间值。这样才能够让由三条边组合成的圆角渐变三角形的渐变色值比较自然。

实现代码：

重点注意注释部分

1.伪类元素的两条边的旋转中心的计算方式。

2.蓝色那条边的渐变临界值的计算方式。

四、实现原理

通过伪类元素::after,::before实现圆角、变换、旋转、渐变实现镂空三角形，再通过改变宽度填充镂空部分，最后注意渐变颜色色值取半及渐变方向。