利用CSS3中transparent实现三角形及三角形组合图

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

    几何之三角形及三角形的组合图案理论

三角形( 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