css 三角形三种方法

image.png

宽高为0效果，想要三角形只要将border颜色设置为transparent(透明即可)

  .triangle {
    width:0px;
    height: 0px;
    border-left: 100px solid red;
    border-top: 100px solid rgb(43, 255, 0);
    border-bottom: 100px solid rgb(0, 4, 255);
    border-right: 100px solid pink;
  }

<div class='triangle'></div>

image.png

.triangle {
    width:0px;
    height: 0px;
    border-left: 100px solid red;
    border-top: 100px solid transparent;
    border-bottom: 100px solid transparent;
    border-right: 100px solid transparent;
  }

2 canvas（坐标画点，然后闭合路线）

image.png

<canvas id="canvas"></canvas>
<script>
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
      ctx.beginPath();      // 起始一条路径，或重置当前路径
      ctx.moveTo(75,50);    // 把路径移动到画布中的指定点，不创建线条
      ctx.lineTo(100,75);   // 添加一个新点，然后在画布中创建从该点到最后指定点的线条
      ctx.lineTo(100,25)    // 添加一个新点，然后在画布中创建从该点到最后指定点的线条
      ctx.fillStyle='green' // 设置或返回用于填充绘画的颜色、渐变或模式
      ctx.fill() // 闭合路线
  </script>

3 svg
<polygon> 标签用来创建含有不少于三个边的图形。

<svg width="100%" height="100%" version='1.1' xmlns="http://www.w3.org/2000/svg">
 <polygon points='220,100 300,210 170,250' style="fill:#cccccc;stroke: #000000;stroke-width: 1"></polygon>
</svg>