CSS 兼容小三角
<!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;}