前端实现渐变色填充的三角形

摘要：canvas实现:绘制三角形、设置渐变色并填充，上述代码实现一个渐变色三角形，如果想要绘制多个渐变色三角形，就需要多次进行「1，2」操作。css实现:绘制渐变色的矩形、绘制两个和背景色同色的三角形

实现效果:

一、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」操作。

二、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;
  }

【缺点】这种方式不能实现效果二，对于效果一不允许背景色带有透明度，实现效果有一定的局限性。

总结

对于简单的效果，建议使用方法二，如果要实现较为复杂的效果，可以使用方法一或者直接用图片替代（这种方式最简单直接）

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_10973