如何使用 CSS BORDER 製作純 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！
