css三角制作

第一类：通过使用border绘制

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

triangle1.png

第二类：通过css样式的渐变绘制

.triangle {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right,  #fff 50%, blue 50%)
}

triangle2.png

第三类: 使用canvas进行绘制，不算css

// style:
 #triangle {
  width: 300px;
  height: 300px;
}

// js
var c=document.getElementById("triangle");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,150);
ctx.lineTo(300,150);
ctx.lineTo(0,0)
ctx.closePath();
ctx.strokeStyle="blue";
ctx.stroke()
ctx.fillStyle = "blue";
ctx.fill();

triangle3.png