纯css实现小三角

原理就是：宽高为零，单独设置border的宽度，然后上右下左，根据需要选择三角形的方向，比如选向上箭头，其他右、下、左设置为透明；

/**向下的三角**/
.sanjiao_down{
    width:0;
    height:0;
    overflow:hidden;
    font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
    line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
    border-width:10px;
    border-style:solid;  /*ie6下会出现不透明的兼容问题*/
    border-color:#f30 transparent transparent transparent;
}

但是ie6下会出现bug，透明的三条边框没达到透明的效果，如下图

需要把透明的边框样式设置为dotted或者dashed都可解决。

最终代码为

/**向下的三角**/
.sanjiao_down{
    width:0;
    height:0;
    overflow:hidden;
    font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
    line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
    border-width:10px;
    border-style:solid dashed dashed dashed;/*IE6下, 设置余下三条边的border-style为dashed,即可达到透明的效果*/
    border-color:#f30 transparent transparent transparent;
}

参考资料：https://www.cnblogs.com/monozxy/p/7903019.html