如何使用 CSS BORDER 製作純 CSS 的「三角形」？ (免圖片)

 10 / 9, 2012  CSS , 推薦文章 , 網頁設計

Yuxin 還不知道 CSS 可以做這麼多變化之前，要製作一個三角形都是使用圖片來呈現。不過，其實使用簡單的幾句 CSS 就可以不用圖片而做出三角形的效果。要做出這個效果，我們要用到的是 CSS 的 border 邊框屬性，而這個三角形還可以有大小、尖銳度和顏色的效果，在網頁製作上可說是非常方便。然而，我們還可以利用 :after 和 :before ，製作出更多更棒的 UI 。

這次我們先來看實作的部分來勾引起讀者的興趣(?)，再來解釋原理。

三角形箭頭朝右

顯示效果：（三角形為圖左上角的。）

程式碼：

1 2 3 4 5 6 7 8 9

<style> .triangle {     border-top: 25px solid white;     border-left: 25px solid #2D89EF;     border-bottom: 25px solid white;     display: inline-block; } </style> <div class="triangle"></div>

這部分為什麼會有這樣的效果，我們稍後再來解釋。

三角形箭頭朝左

效果：（不再重複開發者工具部分）

程式碼：

1 2 3 4 5 6 7 8 9

<style> .triangle {     border-top: 25px solid white;     border-right: 25px solid #2D89EF;     border-bottom: 25px solid white;     display: inline-block; } </style> <div class="triangle"></div>

三角形箭頭朝上

效果：

程式碼：

1 2 3 4 5 6 7 8 9

<style> .triangle {     border-left: 25px solid white;     border-bottom: 25px solid #2D89EF;     border-right: 25px solid white;     display: inline-block; } </style> <div class="triangle"></div>

三角形箭頭朝下

效果：

程式碼：

1 2 3 4 5 6 7 8 9

<style> .triangle {     border-left: 25px solid white;     border-top: 25px solid #2D89EF;     border-right: 25px solid white;     display: inline-block; } </style> <div class="triangle"></div>

製作原理

不知道各位看過以上的效果之後，是覺得很驚奇還是老梗(?)了？上面的顯示效果，都真的是用一個 div + CSS 來達成的效果，至於為什麼用 border 其中三邊互相搭配就可以有這樣的效果呢？我們先來看這張圖：

發現了嗎？如果你把邊框 border 加粗，而鄰邊交界的地方，是一個 斜線 。懂了嗎？我們就是利用鄰邊鄰邊交界特性，就可以把一個三角形製作出來了。

所以，當我們要製作尖端 朝右 的箭頭時，我們就要保留 左邊 的顏色，然後把上面和下面的顏色值設為白色，呈現出來就會是一個朝右的箭頭。其餘依此類推囉～

另外，我們還可以搭配上 選擇器:after 及 選擇器:before 來製作除了主體外更多的效果，這部分就請各位自行研究一下 :after 和 :before 的用法，再直接套用 border 做三角形即可 (較進階)。

就這樣，你又學會了一個 CSS 的技巧囉！下次，就不用再做一個三角形的圖片裝飾，又耗資源，直接使用 CSS！