把寬高設為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三角形"就有很多方法了