- A+
所属分类：Web前端
实现效果
效果一：
效果二：
实现思路
-
canvas实现
1. 绘制三角形
// html <canvas id="triangle" width="30" height="30"> Your browser does not support the canvas element. </canvas> // javascript var triangle: any = document.getElementById("triangle"); var ctx = triangle.getContext("2d"); // canvas 绘制区域 ctx.beginPath(); // 开始绘制 ctx.moveTo(0, 0); // 起点A(0,0) ctx.lineTo(30, 0); // 从起点A(0,0)绘制到B(30,0) ctx.lineTo(15, 16); // 从B(30,0)绘制到C(15,16) 2. 设置渐变色并填充
// javascript const grd1 = ctx.createLinearGradient(0, 0, 0, 16); // 渐变方向-Y轴 grd1.addColorStop(0, "#FFFFFF"); //起始颜色 grd1.addColorStop(1, "#CE070A80"); //终点颜色 ctx.fillStyle = grd1; //以上面定义的渐变填充 ctx.fill(); //闭合形状并且以填充方式绘制出来 【拓展】上述代码实现一个渐变色三角形，如果想要绘制多个渐变色三角形，就需要多次进行「1，2」操作。示例代码：
点击查看代码
var bg: any = document.getElementById("triangle"); var ctx = bg.getContext("2d"); ctx.beginPath(); ctx.moveTo(0, 10); ctx.lineTo(30, 10); ctx.lineTo(15, 26); const grd2 = ctx.createLinearGradient(0, 10, 0, 26); grd2.addColorStop(0, "#FFFFFF"); //起始颜色 grd2.addColorStop(1, "#CE070A80"); //终点颜色 ctx.fillStyle = grd2; //以上面定义的渐变填充 ctx.fill(); //闭合形状并且以填充方式绘制出来 //填充三角形（等边） ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(30, 0); ctx.lineTo(15, 16); const grd1 = ctx.createLinearGradient(0, 0, 0, 16); grd1.addColorStop(0, "#FFFFFF"); //起始颜色 grd1.addColorStop(1, "#CE070A80"); //终点颜色 ctx.fillStyle = grd1; //以上面定义的渐变填充 ctx.fill(); //闭合形状并且以填充方式绘制出来 -
css实现
1. 绘制渐变色的矩形
// html <div className="triangle"></div> // css .triangle { width: 30px; height: 16px; background-image: linear-gradient(#FFFFFF, #CE070A80); } 2. 绘制两个和背景色同色的三角形
// css .triangle:before { position: absolute; content: ""; width: 0; height: 0; border-right: 15px solid transparent; border-bottom: 16px solid #FFFFFF; } .triangle:after { position: absolute; content: ""; right: 0; // 使绘制的三角形位于矩形右侧 width: 0; height: 0; border-left: 15px solid transparent; border-bottom: 16px solid #FFFFFF; } 【缺点】这种方式不能实现效果二，对于效果一不允许背景色带有透明度，实现效果有一定的局限性。
