使用css來制作三角，在日常用得較多。恰好這幾天項(xiàng)目中有用到，之前只是從網(wǎng)上copy下來代碼直接用，但是今天在用的時(shí)候遇到一些問題，于是借此機(jī)會(huì)把這個(gè)css繪制三角好好研究下吧。

我們分別寫一個(gè)<div>,<s>,<span>標(biāo)簽，并給上下左右四個(gè)border賦值不同的顏色，看看是什么樣子：

html：

<div class="triangle"></div> <p><s class="triangle"></s><span class="triangle"></span></p>

?

css：

.triangle {width: 20px;height: 20px;border: 9px solid;border-color: blue red green yellow; }

在chrome下如圖：

在IE下，div構(gòu)成的三角中的內(nèi)容區(qū)比chrome要小。

如果，我們把四個(gè)方向border的任意一邊保留，其余三個(gè)邊的顏色設(shè)置成透明，同時(shí)把設(shè)置height:0,width:0，這樣我們就能得到一個(gè)三角形咯，我們先把所有邊的顏色都保留，看是什么樣子的。

我們發(fā)現(xiàn)，div這種塊級(jí)元素，在chrome下面可以完美的表現(xiàn)出4個(gè)三角，但是IE下只能表現(xiàn)出上下的三角。其次，內(nèi)聯(lián)元素表現(xiàn)出的樣式，在IE和chrome下面是一樣的。于是，這樣就可能會(huì)出現(xiàn)一個(gè)問題。就是在寫三角的時(shí)候，我們寫上下三角的時(shí)候，在IE和chrome下面，塊級(jí)元素和內(nèi)聯(lián)元素都能展示出三角。但是你如果按照這種代碼去寫左右方向的三角的話，在chrome下ok，但是IE下面就會(huì)顯示出體形來。這就會(huì)出現(xiàn)問題咯。這個(gè)問題也困擾了我，當(dāng)時(shí)我也想，怎么同樣的代碼，出來的三角就不一樣呢？原來方向不同，在IE下的表現(xiàn)也不一樣。好，現(xiàn)在，我們來讓梯形變成三角形。只需要加上一段代碼：font-size:0，就可以啦

修改css代碼如下：

.triangle {height: 0;width: 0;border: 9px solid;border-color: blue red green yellow;font-size: 0; }

現(xiàn)在可以完美的兼容IE和chrome啦，FF也不在話下，哈哈。

好，現(xiàn)在我們?cè)僭O(shè)置其中三個(gè)邊框的顏色為透明的！看看會(huì)不會(huì)有三角出現(xiàn)哦，就以右邊的三角為例吧。

修改css代碼如下：

.triangle {height: 0;width: 0;border: 9px solid;border-color: transparent red transparent transparent;font-size: 0; }

最終，IE7/8/9和chrome下面都o(jì)k，只是IE6下面不支持transparent，而使用默認(rèn)的背景色黑色，如圖所示：

?

IE6下面如此的丑陋，當(dāng)然得解決掉，你可以使用如下的方法：

1. css hack

針對(duì)IE6的hack，給上，左，下的三個(gè)border設(shè)置為白色，但是這個(gè)情況只適用于背景色也為白色的情況

相應(yīng)css代碼：

.triangle {height: 0;width: 0;border: 9px solid;border-color: transparent red transparent transparent;font-size: 0;_border-top-color: white;_border-left-color: white;_border-bottom-color: white; }

2. border-style

這個(gè)方法更好，設(shè)置要顯示一邊的三角border-style:solid，其他三邊為border-style:dashed，這樣利用虛線樣式的border可以形成天然無污染的空白，多好！修改css代碼如下：

.triangle {height: 0;width: 0;border-width: 9px ;border-style: dashed solid dashed dashed; border-color: transparent red transparent transparent;font-size: 0; }

這樣IE6就可以兼容咯！

?

參考資料：

css border三角，圓角生成技術(shù)簡(jiǎn)介

利用css制作小三角

轉(zhuǎn)載于:https://www.cnblogs.com/hutaoer/archive/2012/11/09/2762475.html

總結(jié)

以上是生活随笔為你收集整理的使用css制作三角，兼容IE6，用到的标签divsspan的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。