Top

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

posted @ 2017-04-18 23:19  Avenstar  阅读(576)  评论(0编辑  收藏  举报