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

我們分別寫一個<div>,<s>,<span>標簽，并給上下左右四個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構成的三角中的內容區比chrome要小。

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

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

修改css代碼如下：

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

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

好，現在我們再設置其中三個邊框的顏色為透明的！看看會不會有三角出現哦，就以右邊的三角為例吧。

修改css代碼如下：

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

最終，IE7/8/9和chrome下面都ok，只是IE6下面不支持transparent，而使用默認的背景色黑色，如圖所示：

?

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

1. css hack

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

相應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

這個方法更好，設置要顯示一邊的三角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三角，圓角生成技術簡介

利用css制作小三角

轉載于:https://www.cnblogs.com/hutaoer/archive/2012/11/09/2762475.html

總結

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

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