纯css（无图片）实现带边框三角指示图标

我们在平常的开发过程中经常碰到需要一个三角的指示小图标，一般的做法是使用图片来做，快速方便。在土豆网看视频的时候发现他们也用到了这种效果，看了下他们的源码，完全是用css来实现。记录一下。

代码如下：

<style type="text/css">
	i.caret{
		display: block;
		border-color: transparent transparent #DDD;
		border-style: dashed dashed solid;
		border-width: 0 9px 9px;
		width: 0;
		height: 0;
		line-height: 0;
		position: absolute;
	}
	i.caret i{
		border-color: transparent transparent #f4f3f3;
		border-style: dashed dashed solid;
		border-width: 0 7px 7px;
		width: 0;
		height: 0;
		line-height: 0;
		position: absolute;
		left: -7px;
		top: 2px;
		z-index: 2;
		
	}
	
</style>
<i class="caret">
	<i></i>
</i>

当然，这个实现只是箭头向上，其他方向的指向也可以类似实现。比如朝左：

<style type="text/css">
.arrow{
display: block;
    border-color: transparent #444a52 transparent;
    border-style: dashed dashed solid;
    border-width: 9px 9px 9px 0;
    width: 0;
    height: 0;
    line-height: 0;
    position: absolute;
}
</style>
<i class="arrow"></i>

其中的规律可以自寻发现。