<!DOCTYPE>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css" >
.index_nav a:hover i, .index_nav a.on i {
display: inline-block;
width: 0;
height: 0;
font-size: 0;
overflow: hidden;
position: absolute;
bottom: -26px;
left: 50%;
border: 13px dashed transparent;
border-top: 13px solid #ea331a;
}
</style>
</head>
<body>
<div class="index_nav clearfix">
<a href="javascript:;" class="on">12月17日<i></i></a>
</div>
</body>
</html>
效果截图：
------------2015.1.19补充更新-------------------
移动端三角可以利用伪类 直接省略掉空标签：
html：
<h2>全部最新上架</h2>
css：
h2:after{
position: absolute;
margin-left: 50%;
left: 50px;
top: 9px;
/*border: 6px dashed transparent;
border-left: 6px solid rgba(255,255,255,1);*//*兼容的三角写法*/
content:'';
border-color:transparent transparent transparent rgba(255,255,255,1);
border-width:6px 9px;
border-style:solid;
}