视觉稿中经常有些小三角，如下图。每次用图片做太不方便了，我们看看用css实现的效果（支持ie6,7哦）
<style>
/*border实现三角*/
/*箭头向上*/
.arrow-top{
width : 0;
height : 0;
font-size : 0;
line-height : 0;
border-left: 5px dashed transparent;
border-right: 5px dashed transparent;
border-bottom: 5px solid red;
}
/*箭头向下*/
.arrow-bottom{
width : 0;
height : 0;
font-size : 0;
line-height : 0;
border-left: 5px dashed transparent;
border-right: 5px dashed transparent;
border-top: 5px solid red;
}
/*箭头向右*/
.arrow-right{
width : 0;
height : 0;
font-size : 0;
line-height : 0;
border-bottom: 5px dashed transparent;
border-top: 5px dashed transparent;
border-left: 5px solid red; }
/*箭头向左*/
.arrow-left{
width : 0;
height : 0;
font-size : 0;
line-height : 0;
border-bottom: 5px dashed transparent;
border-top: 5px dashed transparent;
border-right: 5px solid red; }
</style>
来看看整体html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>border实现三角</title>
<style>
/*border实现三角*/
/*箭头向上*/
.arrow-top{
width : 0;
height : 0;
font-size : 0;
line-height : 0;
border-left: 5px dashed transparent;
border-right: 5px dashed transparent;
border-bottom: 5px solid red;
}
/*箭头向下*/
.arrow-bottom{
width : 0;
height : 0;
font-size : 0;
line-height : 0;
border-left: 5px dashed transparent;
border-right: 5px dashed transparent;
border-top: 5px solid red;
}
/*箭头向右*/
.arrow-right{
width : 0;
height : 0;
font-size : 0;
line-height : 0;
border-bottom: 5px dashed transparent;
border-top: 5px dashed transparent;
border-left: 5px solid red; }
/*箭头向左*/
.arrow-left{
width : 0;
height : 0;
font-size : 0;
line-height : 0;
border-bottom: 5px dashed transparent;
border-top: 5px dashed transparent;
border-right: 5px solid red; }
</style>
</head>
<body> <div>
<span>店铺信息</span>
<span class="arrow-right" style="display: inline-block;"></span>
<span class="arrow-left" style="display: inline-block;"></span>
<span class="arrow-top" style="display: inline-block;"></span>
<span class="arrow-bottom" style="display: inline-block;"></span>
</div> </body>
</html>