原理就是：寬高為零，單獨設置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

總結

以上是生活随笔為你收集整理的纯css实现小三角的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。