纯CSS实现圆角渐变三角形
通过伪类元素::after,::before实现圆角、变换、旋转、渐变实现镂空三角形，再通过改变宽度填充镂空部分，最后渐变颜色色值取半及调整渐变方向。
一、背景
由于该三角形为品牌设计元素之一，在多个页面均需要展示数个“大小不一 & 角度各异” 的 渐变圆角三角形 。考虑加载的图片数量过多，想尝试用纯css来实现。
文章图片
border实现三角形 
文章图片
渐变圆角三角形 二、分析思路
【方案一】
用 border 实现三角形
文章图片
border实现三角形效果图jie 结论：
1.不是等边三角
2.不是圆角
【纯CSS实现圆角渐变三角形】3.border-color 无法设置渐变颜色
【方案二】
用 圆角矩形 + skew变换
文章图片
文章图片
实现效果 结论：
1.满足等边三角形
2.满足渐变问题
3.无法解决圆角问题
三、解决方案
【方案三】
用三个圆角矩形组合成三角形。参考【圆角镂空三角形】
文章图片
圆角镂空三角形 在这个基础上的衍生图形有：
文章图片
衍生图形
最后一个图形就是我们需要的圆角渐变三角形啦~
这里需要注意的是渐变的方向和色值
文章图片
三条边的渐变方向都是蓝色箭头所指方向。而蓝色框选的一条边的渐变色值边界值需要取另外两条边的渐变色值的中间值。这样才能够让由三条边组合成的圆角渐变三角形的渐变色值比较自然。
实现代码：
文章图片
重点注意注释部分
1.伪类元素的两条边的旋转中心的计算方式。
2.蓝色那条边的渐变临界值的计算方式。
四、实现原理
通过伪类元素::after,::before实现圆角、变换、旋转、渐变实现镂空三角形，再通过改变宽度填充镂空部分，最后注意渐变颜色色值取半及渐变方向。
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 人脸识别|【人脸识别系列】| 实现自动化妆
- paddle|动手从头实现LSTM