把宽高设为0，就是三角形，宽高不为0就是矩形。

原理很简单：

.test {
    width: 100px;
    height: 100px;
    border-top: 50px solid orange;
    border-left: 50px solid gray;
    border-right: 50px solid gray;
    border-bottom: 50px solid red;
}

观察以上代码，然后将宽和高逐步设置成0就会出现有个对角线的矩形；

然后根据需要，分别设置border的transparent值，即可得到相应的三角形

http://www.jb51.net/article/42513.htm  这是脚本之家一个制作三角形的文章.

方法很多，用搜狗输入法v1里面的菱形修改也行，百度上搜索"html三角形"就有很多方法了