純 css 做三角形的方法，目前我知道三種
這個原理很簡單，我我們先看下面的圖，這是乙個邊框為 20px 的 div，看他的邊框，是個梯形，變化會從這裡開始。
css：
.********
四個邊框都變成三角形了，現在我再把它的左右和下邊框的顏色都設成透明或和背景顏色相同的顏色，就出來我們想要的三角形了，推薦把邊框設定成透明，這樣拓展性更好。
注：ie6下把邊框設定成 transparent 時會出現黑影，並不會透明，把 border-style 設定成 dashed 可以解決。
css：
.********
html：
class="message-box">
我是利用 border 屬性實現的
class="********-border tb-border">div>
class="********-border tb-background">div>
div>
css：
.message-box
.********-border
.tb-border
.tb-background
注意：它的大小是由 font-size 決定的，width 和 height 都決定不了，但最好還是加上，這樣各個瀏覽器去生成這個字元的時候能保持一致，我們去寫絕對定位的時候就不用寫 hack 了。
html：
class="message-box">
我是利用 ◆ 字元實現的
class="********-character tc-border">◆div>
class="********-character tc-background">◆div>
div>
css：
.message-box
.********-character
.tc-border
.tc-background
注：ie6下無效。
html：
class="message-box">
我是利用 css transfrom 屬性字元實現的span>
class="********-css3 transform ie-transform-filter">
div>
div>css：
.message-box
.********-css3
.transform
/*ie7-9*/
.ie-transform
-filter
三角形旋轉css 三種純CSS實現三角形的方法
看到像上圖這樣的 tip 的小三角，你會怎麼辦？純 css 做三角形的方法，目前我知道三種，分別是利用 border 屬性，字元，和 css3 transfrom 做 45 度旋轉實現的，css3的方法是在碼頭哥的部落格上學到的，很感謝你們的分享，前端有你們更精彩！1.利用 border 屬性實現三...
三種純CSS實現三角形的方法
本文作者hey feelcss發表於 2012 06 17 看到像上圖這樣的 tip 的小三角，你會怎麼辦？純 css 做三角形的方法，目前我知道三種，分別是利用 border 屬性，字元，和 css3 transfrom 做 45 度旋轉實現的，css3的方法是在碼頭哥的部落格上學到的，很感謝你們...
純css實現三角形
1 將元素的寬高都設定為0。2 只設定border屬性。3 把任意三條邊隱藏掉 顏色設為 transparent 剩下的就是乙個三角形。lang zh cn charset utf 8 name viewport content width device width,initial scale 1....