如何使用 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!
沒有留言:
張貼留言