為了方便用border做三角形，省去那繁瑣的思考三角朝向的問題，自己搞了個小口訣，分兩篇，一篇是普通的三角，一篇是針對直角三角，口訣如下：

普通篇：

方向朝哪哪邊無，

顏色反向來彌補

直角三角篇：

直角三角分兩邊，

哪側無值朝哪邊，

具體顏色來填充，

要看直角在哪邊，

向上直角填上邊，

向下直角填下邊，

top、bottom倆冤家，

從此永遠不想見。

針對普通篇的效果如下：

代碼如下：

.toLeft {
                width: 0;
                height: 0;
                border-width: 30px 50px 30px 0
 
;
                border-style: solid;
                border-color: transparent #007AFF transparent transparent;
            }

demo解析：因為方向朝左，所以左側值為0，因為方向朝左，顏色填充的是在右邊，符合口訣，嘿嘿，smell。其他的就不詳細說明了，直接上效果，如下：

代碼如下：

.toRight {
                width: 0;
                height: 0;
                border-width: 30px 0 30px 50px
 
;
                border-style: solid;
                border-color: transparent transparent transparent #007AFF;
            }
            .toTop {
                width: 0;
                height: 0;
                border-width: 0 30px 50px 30px;
                border-style: solid;
                border-color
 
: transparent transparent #007AFF transparent;
            }
            .toBottom {
                width: 0;
                height: 0;
                border-width: 30px 30px 0 50px;
                border-style: solid;
                border-color: #007AFF transparent transparent transparent;
            }

直角三角demo效果：

代碼如下：

.straightLeftTop {
                width: 0;
                height: 0;
                border-width: 100px 50px 0 0;
                border-style: solid;
                border-color: #0062CC transparent transparent transparent;
            }

demo解析：這個直角三角的角是在左上的，根據口訣分析，哪邊無值在哪邊，左側無值，正確；顏色填充呢，還是因為直角的位置關系，因為，直角在上邊，所以顏色填充的位置在上邊，正確，還是因為直角的關系，因為直角在上邊的，所以bottom無值，從此永遠不相見，正確。其他例子如下：

代碼如下：

.straightRightTop {
                width: 0;
                height: 0;
                border-width: 100px 0 0 50px;
                border-style: solid;
                border-color: #0062CC transparent transparent transparent;
            }
            .straightLeftBottom {
                width: 0;
                height: 0;
                border-width: 0 50px 100px 0;
                border-style: solid;
                border-color: transparent transparent #0062CC transparent;
            }
            .straightRightBottom {
                width: 0;
                height: 0;
                border-width: 0 0 100px 50px;
                border-style: solid;
                border-color: transparent transparent #0062CC transparent;
            }

在自己不懂之前參考過的網址，感謝他們：http://www.cnblogs.com/blosaa/p/3823695.html

轉載請註明出處，thank you！

使用CSS border 做三角形 口訣贈上