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

纯css实现小三角-风君子博客纯css实现小三角-风君子博客
/**向下的三角**/
.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,透明的三条边框没达到透明的效果,如下图纯css实现小三角-风君子博客

需要把透明的边框样式设置为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