CSS3中三角形及三角形組合圖實現

    幾何之三角形及三角形的組合圖案理論

三角形( triangle ['traɪæŋɡl])能夠當作正方形對角線交叉造成的圖形

若想獲得編號①方向向下三角形，只需對編號②③④三角形讓其透明transparent；border-top設置須要顯示顏色便可

若想獲得編號②方向向左三角形，只需對編號①③④三角形讓其透明transparent；border-right設置須要顯示顏色便可

若想獲得編號④方向向右三角形，只需對編號①②③三角形讓其透明transparent；border-left設置須要顯示顏色便可

若想獲得編號③方向向上三角形，只需對編號①②④三角形讓其透明transparent；border-bottom設置須要顯示顏色便可 

若想獲得編號①③三角形，只需對編號②④讓其透明transparent便可

（以下圖所示 ）

    HTML代碼體現

    利用僞類:after實現矩形與三角形組合 優勢代碼簡潔

    利用僞類實現較複雜組合

資料參考  http://www.cnblogs.com/zjneter/p/5652006.html