原理
css盒模型
一個盒子包括: margin+border+padding+content– 上下左右邊框交界處出呈現平滑的斜線.
利用這個特點, 通過設置不同的上下左右邊框寬度或者顏色可以得到小三角, 小梯形等.– 調整寬度大小可以調節三角形形狀.
示例1
一般情況下, 我們設置盒子的寬高度, 及上下左右邊框, 會呈現如下圖·
#test1 { height:20px; width:20px; border-color:#FF9600 #3366ff #12ad2a #f0eb7a; border-style:solid; border-width:20px; }
示例2
在上面基礎上, 我們把寬高度都設為0時, 會呈現上述的邊界斜線.·
#test2 { height:0; width:0; overflow: hidden; /* 這里設置overflow, font-size, line-height */ font-size: 0; /*是因為, 雖然寬高度為0, 但在IE6下會具有默認的 */ line-height: 0; /* 字體大小和行高, 導致盒子呈現被撐開的長矩形 */ border-color:#FF9600 #3366ff #12ad2a #f0eb7a; border-style:solid; border-width:20px; }
寬高為0，邊框大小不一樣的盒子，例如
/**不等邊框的盒子**/ .box3{ width:0; height:0; overflow:hidden; font-size: 0; /*是因為, 雖然寬高度為0, 但在IE6下會具有默認的 */ line-height: 0; /* 字體大小和行高, 導致盒子呈現被撐開的長矩形 */ border-width:20px 10px 0 0; border-style:solid; border-color:orange blue transparent transparent; }
這時, 其實我們已經看到有上下左右四個三角形了..如果, 我們把4種顏色, 只保留一種顏色, 余下3種顏色設置為透明(或者設置為和背景色相同的顏色), 那不就出現一個小三角了么·
示例3
只保留上面的橙色, 看看
#test3 { height:0; width:0; overflow: hidden; font-size: 0; line-height: 0; border-color:#FF9600 transparent transparent transparent; border-style:solid; border-width:20px; }
可是, IE6下不支持透明啊~~~, 會出現下圖的樣子
找到一個在IE6下邊框透明的文章中找到解決辦法, 如下例
IE6下, 設置余下三條邊的border-style為dashed,,,即可達到透明的效果~ 具體原因可以見參考資料3
#test4 { height:0; width:0; overflow: hidden; font-size: 0; line-height: 0; border-color:#FF9600 transparent transparent transparent; border-style:solid dashed dashed dashed; border-width:20px; }
當然, 在IE6下, 不設置透明, 將其顏色設置為背景色, 使其看不出來也是可以的.
示例5
上面我們畫的小三角的斜邊都是依靠原來盒子的邊, 還有另外一種形式的小三角, 就是斜邊在盒子的對角線上·
#test5 { height:0; width:0; overflow: hidden; font-size: 0; line-height: 0; border-color:#FF9600 #3366ff transparent transparent; border-style:solid solid dashed dashed; border-width:40px 40px 0 0 ; }
保留其中一種顏色, 就可以得到斜邊在對角線上的三角形了…多個這樣的三角形, 通過設置邊框大小, 顏色, 拼湊起來可以形成任意形狀的三角形.
像這種不規則的三角形, 延伸一下, 放在氣泡框上, 就可以省去拼背景圖片的麻煩了.
上面所說的都為實體無邊的三角形，那么帶有邊框的三角形如何實現呢
，這種就相當於兩個絕對定位的無邊框三角形疊加在一起，外三角邊框比里三角小1px，並且外三角定位比里三角靠外1px。
為了代碼簡潔在非ie6下采用:before和after偽類，ie6下用樣式名來實現，代碼
<div class="box sanjiao_border"> <!--ie6下需用，非ie6無需--> <i class="before"></i><i class="after"></i> </div>
.sanjiao_border:before,.sanjiao_border .before{/*.before為ie6下用到*/ content: ''; /*偽類下的屬性*/ display:block; position:absolute; top:0px; left:150px; width:0; height:0; overflow:hidden; font-size: 0; /*是因為, 雖然寬高度為0, 但在IE6下會具有默認的 */ line-height: 0; /* 字體大小和行高, 導致盒子呈現被撐開的長矩形 */ border:10px; border-style:dashed dashed solid dashed; border-color:transparent transparent #f30 transparent; } .sanjiao_border:after,.sanjiao_border .after{/*.after為ie6下用到*/ content: '';/*偽類下的屬性*/ display:block; width:0; height:0; overflow:hidden; font-size: 0; /*是因為, 雖然寬高度為0, 但在IE6下會具有默認的 */ line-height: 0; /* 字體大小和行高, 導致盒子呈現被撐開的長矩形 */ border:9px; border-style:dashed dashed solid dashed; border-color:transparent transparent #fff transparent; position:absolute; left:151px; top:2px; }
2、字符法
原理：采用菱形的字符◆，然后決定定位把多余的部分溢出掉，該種方法只適合三角和拼接板塊顏色一致。
<div class="mod_sanjiao"> <span>◆</span> </div>
/*字符法*/ .mod_sanjiao{width:200px; height:30px; background:#fff;margin:30px; position:relative;} .mod_sanjiao span{ position:absolute; top:-10px; left:45%; font-size:20px;/*控制該菱形的大小*/ color:#fff;/*控制該菱形的顏色*/ }
氣泡框：
到這一步我們已經成功的模擬出了一個小三角，下一步我們把這個小三角同矩形框結合起來。先設置一個矩形框，然后把小三角定位到矩形框上。先來寫出HTML結構：
<div class="tag"> <em></em> CSS氣泡框實現 </div>
.tag{ width:300px; height:100px; border:5px solid #09F; position:relative;} .tag em{ display:block; border-width:20px; position:absolute; bottom:-40px; left:100px; border-style:solid dashed dashed; border-color:#09F transparent transparent; font-size:0; line-height:0; }
效果如下：
現在指示方向的三角形箭頭是實心的，而我們想要的是鏤空的效果，這里我們再疊加一個同氣泡框背景顏色一樣的小三角，然后把這個疊加的小三角移動一下位置就能達到了。
首先需要對HTML結構進行調整，如下：
<div class="tag"> <em></em> <span></span> CSS氣泡框實現 </div>
.tag{ width:300px; height:100px; border:5px solid #09F; position:relative; background-color:#FFF; } .tag em{ display:block; border-width:20px; position:absolute; bottom:-40px; left:100px; border-style:solid dashed dashed; border-color:#09F transparent transparent; font-size:0; line-height:0; } .tag span{ display:block; border-width:20px; position:absolute; bottom:-33px; left:100px; border-style:solid dashed dashed; border-color:#FFF transparent transparent; font-size:0; line-height:0; }
最終效果如下所示：
注意：疊加的小三角span的bottom值並不是border-width的值，兩個小三角bottom的差值理論上應該是2(border-width)2的平方根
最后來把代碼優化一下，以便在后期更容易維護，完整的HTML結構：
<div class="tag"> <div class="arrow"> <em></em><span></span> </div> CSS氣泡框實現 </div>
.tag{ width:300px; height:100px; border:5px solid #09F; position:relative; background-color:#FFF; } .arrow{ position:absolute; width:40px; height:40px; bottom:-40px; left:100px; } .arrow *{ display:block; border-width:20px; position:absolute; border-style:solid dashed dashed dashed; font-size:0; line-height:0; } .arrow em { border-color:#09F transparent transparent; } .arrow span { border-color:#FFF transparent transparent; top:-7px;}
舉一反三：不規則三角箭頭的氣泡框又如何實現？
HTML結構同前面一樣：
<div class="tag"> <div class="arrow"> <em></em><span></span> </div> CSS氣泡框實現 </div>
矩形框CSS樣式稍微改動一下：
.tag{ width:300px; height:100px;position:relative; background-color:#09F;}
重新定位一下三角箭頭：
.arrow{ position:absolute; width:70px; height:60px; left:-70px; bottom:10px;}
元素相鄰的兩邊border-style值設為solid（顯示），另兩邊設為transparent（不會顯示）
.arrow *{ display:block; position:absolute; border-style:dashed solid solid dashed; font-size:0; line-height:0; }
首先模擬一個直角三角形，把一個元素的相鄰兩邊color設為相同的值，另外兩邊顏色設為透明，即可得到一個直角：
.arrow em{border-color:transparent #09F #09F transparent; border-width:30px 35px;}
把兩個直角三角形重疊在一起就可以得到一個不規則三角形
.arrow span{ border-width:20px 35px;border-color:transparent #FFF #FFF transparent; bottom:0;}
至此，不規則三角箭頭的氣泡框效果已經實現。
除了通過設置元素的border來模擬小三角之外，還可以用特殊字符來模擬，用特殊字符模擬小三角同樣需要用到定位和重疊覆蓋，只不過不需要調整border屬性了。
先來看一個菱形“◆” ，它在頁面中的代碼是“◆”，需要注意的是頁面編碼需要設置為utf-8，在網頁中可以把◆當作文字處理，可以通過調整font-size來它的大小、通過color來設置它的顏色。
HTML結構依然用前面的，不同的是在em、span標簽中加入了 ◆
<div class="tag"> <div class="arrow"> <em>◆</em><span>◆</span> </div> CSS氣泡框實現 </div>
先來設置最外層div的樣式，得到一個矩形框：
.tag{ width:300px; height:100px;position:relative; border:5px solid #09F;}
接着定位箭頭最外層容器div，便於觀察可以先設置一個背景色 ：
.arrow{ position:absolute; width:40px; height:40px; left:100px; bottom:-40px; overflow:hidden;}
再對◆設置樣式：
.arrow * { display:block; position:absolute; font-size:40px; line-height:40px; width:40px; font-family:SimSun; font-style:normal; font-weight:normal; text-align:center; vertical-align:middle; }
注意：為了◆主流瀏覽器中顯示一致，需要清除瀏覽器的默認字體樣式，特別注意這里字體的設置
再分別修改em、span標簽的字體顏色，並對這兩個標簽定位：
.arrow em{ color:#09F; top:-15px;} .arrow span{ color:#FFF; top:-22px;}
|
2
|
.arrow em{
color
:
#09F
;
top
:
-15px
;}
.arrow span{
color
:
#FFF
;
top
:
-22px
;}
|
注意：該例子中em和span兩個元素垂直方向相差約7px，原來同上面提到的一樣，差值理論上應該是2(border-width)2的平方根
完整CSS樣式：
.tag{ width:300px; height:100px;position:relative; border:5px solid #09F;} .arrow{ position:absolute; width:40px; height:40px; left:100px; bottom:-40px; overflow:hidden;} .arrow *{ display:block; position:absolute; font-size:40px; line-height:40px; width:40px;font-family:SimSun; font-style:normal; font-weight:normal;text-align:center; vertical-align:middle;} .arrow em{ color:#09F; top:-15px;} .arrow span{ color:#FFF; top:-22px;}
最終效果如下：
HTML特殊字符查詢：http://ikwebdesigner.com/special-characters/
補充：以上方式實現小三角的過程中不可避免的增加了多余的標簽，如果不要求所有瀏覽器中顯示一致的話， 我們可以利用css3來實現這個小三角
HTML結構：
<div class="tag"> css3氣泡框 </div>
.tag{ width:300px; height:100px; border:5px solid #09F; position:relative; background-color:#FFF; } .tag:before,.tag:after{ content:"";display:block; border-width:20px; position:absolute; bottom:-40px; left:100px; border-style:solid dashed dashed; border-color:#09F transparent transparent; font-size:0; line-height:0; } .tag:after{ bottom:-33px; border-color:#FFF transparent transparent; }
效果同上。