原理：

1、盒子有高度情況下邊框的樣式

代碼：

.inside{width: 20px;height: 20px;border-width: 10px;border-style: solid;border-color: #f30 #00f #333 #ff0; }

效果如下：

2、盒子沒有高度情況下邊框的樣式

代碼：

.inside{width: 0;height: 0;overflow: hidden; /*清除ie6下默認的寬高*/font-size: 0; /*清除ie6下默認的寬高*/line-height: 0; /* 防止盒子因為行高被撐開*/border-width: 10px;border-style: solid;border-color: orange blue gray red; }

效果如下：

3、不等邊框情況下邊框的樣式

.inside{width: 0;height: 0;overflow: hidden; /*清除ie6下默認的寬高*/font-size: 0; /*清除ie6下默認的寬高*/line-height: 0; /* 防止盒子因為行高被撐開*/border-width: 20px 10px 0 0;border-style: solid;border-color: orange blue transparent transparent; }

效果如下：

4、小三角

代碼：

.inside{width: 0;height: 0;overflow: hidden; /*清除ie6下默認的寬高*/font-size: 0; /*清除ie6下默認的寬高*/line-height: 0; /* 防止盒子因為行高被撐開*/border-width: 10px;border-style: solid; /*非實線會沒有邊框*/border-color: #f30 transparent transparent transparent; }

效果如下：

其他三個三角通過更改border-color中的參數來實現，順序分別為上邊框、右邊框、下邊框、做邊框。

在IE6下，會碰到其他三個方向邊框非透明，具體如下：

解決方案如下：

把需要隱藏的三條邊框的樣式改為dashed

代碼：

border-style: solid dashed dashed dashed;

如圖：

這種帶邊框的小三角，實際上是兩個小三角疊加在一起，下面的小三角位置相對上面的小三角向下平移邊框厚度的像素。在非IE6情況下為了方便很多時候直接使用before、after偽類元素

總結

以上是生活随笔為你收集整理的关于CSS小三角的实现,小三角边框的实现，IE6下CSS小三角非透明的情况的全部內容，希望文章能夠幫你解決所遇到的問題。

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