css3绘制三角形

将div的宽和高设置为0;利用border-width、border-style、border-color属性绘制不同位置边框的样式。将不需要展示的三角颜色填充为transparent透明即可,就能得到某一部分三角。

div{
    width:0;
    height:0; border-style: dashed dashed dashed solid ; /* dashed是兼容ie6写法,ie6不支持背景透明*/ border-width:10px; border-color:transparent transparent transparent blue; }

(左下)    (左上)      (右上)    (右下)

div{
            width:0;
            height:0;
            border-style: solid ;
            border-width:10px;
            /*左下*/
            border-color:transparent transparent blue blue;
            /*左上*/
            border-color:blue transparent transparent  blue;
             /*右上*/
            border-color:blue  blue transparent transparent ;
             /*右下*/
            border-color:transparent blue  blue  transparent ;
        }
原文地址:https://www.cnblogs.com/coldfishdt/p/6203254.html