几何之三角形及三角形的组合图案理论
三角形( 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