将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 ; }