三種純CSS實現三角形的方法

本文作者hey@feelcss發表於

2012/06/17

看到像上圖這樣的 tip 的小三角，你會怎麼辦？

純 css 做三角形的方法，目前我知道三種，分別是利用 border 屬性，「◆」字元，和 css3 transfrom 做 45 度旋轉實現的，css3的方法是在碼頭哥的部落格上學到的，很感謝你們的分享，前端有你們更精彩！

1.利用 border 屬性實現三角形

這個原理很簡單，我我們先看下面的圖，這是乙個邊框為 20px 的 div，看他的邊框，是個梯形，變化會從這裡開始。

css：

.********

好的，現在我把它的寬和高都設為 0，看看有什麼變化。

四個邊框都變成三角形了，現在我再把它的左右和下邊框的顏色都設成透明或和背景顏色相同的顏色，就出來我們想要的三角形了，推薦把邊框設定成透明，這樣拓展性更好。

注：ie6下把邊框設定成 transparent 時會出現黑影，並不會透明，把 border-style 設定成 dashed 可以解決。

css：

.********

如果我們想實現下圖的效果該怎麼辦呢？很簡單，做兩個小三角，乙個是背景色，乙個是邊框色，然後利用定位重疊在一起，記住他們的定位要相差乙個畫素。

html：

class="message-box"
>
>我是利用 border 屬性實現的
>
class="********-border tb-border"
>
>
class="********-border tb-background"
>
>
>

css：

.message-box .********-border .tb-border .tb-background

猛擊demo ☻

2.利用」◆「字元實現三角形

字元實現也是要用兩個字元用絕對定位去模擬，只是它不能模擬出三角形，它是個菱形，然後露出半個頭，底色又和背景色一樣，看上去就像是個三角形了。。

注意：它的大小是由 font-size 決定的，width 和 height 都決定不了，但最好還是加上，這樣各個瀏覽器去生成這個字元的時候能保持一致，我們去寫絕對定位的時候就不用寫 hack 了。

html：

class="message-box"
>
>我是利用 ◆ 字元實現的
>
class="********-character tc-border"
>◆
>
class="********-character tc-background"
>◆
>
>

css：

.message-box .********-character .tc-border .tc-background

猛擊demo ☻

3.利用 css3 transfrom 旋轉 45 度實現三角形

先建立乙個帶 border 的 div ，設定好背景色和相鄰的兩個邊框的顏色，然後選擇 45 度，聽著很簡單是嗎，但是利用 ie 的 matrix filter 實現 css3 transfrom 的相容方案很頭大，我是沒看懂，有看懂的兄弟情賜教啊：）

注：ie6下無效。

html：

class="message-box"
>
>我是利用 css transfrom 屬性字元實現的
>
class="********-css3 transform ie-transform-filter"
>
>
>

css：

.message-box .********-css3 .transform /*ie7-9*/ .ie-transform-filter

猛擊demo ☻

本文基於

hey@feelcss