HTML代码:
[html] view plain copy
<&>
CSS代码:
[css] view plain copy
.sanjiao {
width: 0;
height: 0;
overflow: hidden;
border-width: 10px;
border-color: transparent transparent #000 transparent;
border-style: dotted dotted solid dotted;
}
其原理就是给元素加一个比较大的边框,箭头的方向就是border-color四个参数的方向(上、右、下、左),箭头指向那一边就给哪一边设置颜色,其他边透明。
这样就很方便的做了一个小的三角形图标。
其中需要注意的地方是:由于IE6不支持overflow属性,会将其他边框也显示出来,所以将不需要显示的边框的border-style属性设置为dotted就可以完美兼容IE6啦!&>
CSS代码:
[css] view plain copy
.sanjiao {
width: 0;
height: 0;
overflow: hidden;
border-width: 10px;
border-color: transparent transparent #000 transparent;
border-style: dotted dotted solid dotted;
}
其原理就是给元素加一个比较大的边框,箭头的方向就是border-color四个参数的方向(上、右、下、左),箭头指向那一边就给哪一边设置颜色,其他边透明。
这样就很方便的做了一个小的三角形图标。
其中需要注意的地方是:由于IE6不支持overflow属性,会将其他边框也显示出来,所以将不需要显示的边框的border-style属性设置为dotted就可以完美兼容IE6啦!&>