使用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制作小三角
【AK】)
