關於CSS小三角的實現,小三角邊框的實現，IE6下CSS小三角非透明的情況

原理：

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僞類元素