带箭头的指示符

html

<s class="one"><i></i></s>

css
.one{
width: 0px;height: 0px;display: block;border: 10px solid;border-color: transparent transparent #666 transparent;position: absolute;left: 180px;top: 30px;
	}
.one i{width: 0px;
height: 0px;
display: block;
border: 10px solid;
line-height: 0px;
border-color: transparent transparent #fff transparent;
line-height: 0px;
position: absolute;
left: -10px;
top: -9px;}

#说明 1 s i宽度设为0使一边的border从梯形变为3角形，设置border-color 使有些地方看起来无边,把我们不需要的屏蔽掉 i设置position absolute 是为了能让它定位来在s上面以此用他的白色来覆盖s
2  可以不要i以此来获得三角形
下面说明i的left top的设置
当s i未定位时位置关系如下


注意正方形的宽度即可 设s中点坐标为（0,0）i中点坐标为（10,10）0-10   0-9
设置left top值
最终效果


再制作一个只有三角形符号的动画，当hover时向下的箭头变成向上的箭头。

<a href='#'><i></i></a>

css
i{position: absolute;top: 20px;border-color: #666 transparent transparent;transition:all .3s ease-in-out 0s;display: inline-block;height: 0px;width: 0px;border: 4px solid;}
a:hover i{position:relative;border-color: transparent transparent #666;top: 16px;/*要让前后两个小三角在同一个位置，故top变为20-16*/}

鼠标滑过时会出现小三角向上移动消失并且出现上三角的动画。