实现三角形绘制

CSS绘制三角形主要用到的是border属性，也就是边框。

div {
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: orange blue red green;
}

将元素的长宽都设置为0，显示出来的效果是这样的：

（1）三角1

div {
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}

显示出来的效果是这样的：

（2）三角2

div {
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}

显示出来的效果是这样的：

 （3）三角3

div {
    width: 0;
    height: 0;
    border-left: 50px solid red;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}

显示出来的效果是这样的：

 （4）三角4

div {
    width: 0;
    height: 0;
    border-right: 50px solid red;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}

显示出来的效果是这样的：

总体的原则就是通过上下左右边框来控制三角形的方向，用边框的宽度比来控制三角形的角度。