如何使用CSS画一个小三角图标

如何用css写前端开发中常用的项目符号小三角呢？其实很简单

HTML代码：

<div class="sanjiao"></div>

CSS代码：

.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啦！