一、canvas實(shí)現(xiàn)

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 繪制區(qū)域    ctx.beginPath(); // 開始繪制    ctx.moveTo(0, 0); // 起點(diǎn)A(0,0)    ctx.lineTo(30, 0); // 從起點(diǎn)A(0,0)繪制到B(30,0)    ctx.lineTo(15, 16); // 從B(30,0)繪制到C(15,16)

2、設(shè)置漸變色并填充

// JavaScript    const grd1 = ctx.createLinearGradient(0, 0, 0, 16); // 漸變方向-Y軸    grd1.addColorStop(0, "#FFFFFF"); //起始顏色    grd1.addColorStop(1, "#CE070A80"); //終點(diǎn)顏色    ctx.fillStyle = grd1; //以上面定義的漸變填充    ctx.fill(); //閉合形狀并且以填充方式繪制出來

【拓展】上述代碼實(shí)現(xiàn)一個(gè)漸變色三角形，如果想要繪制多個(gè)漸變色三角形，就需要多次進(jìn)行「1，2」操作。

二、css實(shí)現(xiàn)

1、 繪制漸變色的矩形

// html<div className="triangle"></div>
// css.triangle {  width: 30px;  height: 16px;  background-image: linear-gradient(#FFFFFF, #CE070A80);}

2、繪制兩個(gè)和背景色同色的三角形

// 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; // 使繪制的三角形位于矩形右側(cè)    width: 0;    height: 0;    border-left: 15px solid transparent;    border-bottom: 16px solid #FFFFFF;  }

【缺點(diǎn)】這種方式不能實(shí)現(xiàn)效果二，對于效果一不允許背景色帶有透明度，實(shí)現(xiàn)效果有一定的局限性。

總結(jié)

對于簡單的效果，建議使用方法二，如果要實(shí)現(xiàn)較為復(fù)雜的效果，可以使用方法一或者直接用圖片替代（這種方式最簡單直接）。

學(xué)習(xí)更多技能

請點(diǎn)擊下方公眾號(hào)