第一类：通过使用border绘制
.triangle {
width:0;
height:0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid #blue;
}
<div class="triangle"></div>
triangle1.png
第二类：通过css样式的渐变绘制
.triangle {
width: 100%;
height: 100%;
background: linear-gradient(to bottom right, #fff 50%, blue 50%)
}
<div class="triangle"></div>
triangle2.png
第三类: 使用canvas进行绘制，不算css
// style:
#triangle {
width: 300px;
height: 300px;
}
<canvas id="triangle"></canvas>
// 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
