# 如何用border製作三角形icon 在navbar裡常見的選單列表，常會出現倒三角形的符號，這個小符號要如何製作呢？ ![](https://hackmd.io/_uploads/Sy5CyaHDh.png =60%x) #### 1. 使用span 導入icon符號 - 首先必須在html裡先引入外部icon的CDN [https://fonts.googleapis.com/icon?family=Material+Icons](https://fonts.googleapis.com/icon?family=Material+Icons) - 並在[Material Icons](https://fonts.google.com/icons?query=Castoro&icon.style=Filled&icon.set=Material+Icons)裡選擇『mateiral icons』及『filled』（上面的CDN是支援filled類型） - 找到需要的icon後，將span標籤複製上來即可完成。 ![](https://hackmd.io/_uploads/SJkwf6Swh.png) ```= <head> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> </head> <body> <span class="material-icons"> arrow_drop_down </span> </body> ``` ### 2. 使用偽元素及border 來製作 因為導入span會增加html內容，我們也可以使用[偽元素](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements)來製作。 ```= <ul> <li class="dropdown-toggle"><a href="#">產品列表</a></li> </ul> <style> .dropdown-toggle::after { display: inline-block; margin-left: 0.255em; vertical-align: 0.255em; content: ""; border-top: 0.3em solid ＃000; border-right: 0.3em solid transparent; border-bottom: 0; border-left: 0.3em solid transparent; } <style> ``` - ::after 一個選擇器只能添加一個偽元素，有2個冒號代表。 - 偽元素必須加 content: ""; 不然沒有作用。 - display:inline-block 使她可以與相鄰文字並排不會自成一行。 - 因為裡面沒有包內容，所以邊界為四個三角型組成! - 用 margin-left、vertical-align來調整與文字的位置。 ![](https://hackmd.io/_uploads/SJcrKTSwh.png =60%x) ![](https://hackmd.io/_uploads/Hyh6O6Hwh.png =60%x) 結論：從不同的顏色就可以很明顯地看出四塊三角形，未來不管是製作下拉選單圖式，還是往左往右往上，只要依需求把另外三塊三角形設定透明顏色就可以囉！