CSS 三角形下拉框是一種常用的網頁設計元素，它可以讓網頁看起來更加美觀和專業。下面我們來介紹一下如何使用 CSS 實現一個簡單的三角形下拉框。

<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content::before {
content: "";
position: absolute;
top: -10px;
right: 50%;
margin-right: -5px;
border-bottom: 10px solid #ccc;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
</style>
<div class="dropdown">
<button>點擊我</button>
<div class="dropdown-content">
<a href="#">選項一</a>
<a href="#">選項二</a>
<a href="#">選項三</a>
</div>
</div>

首先，我們創建了一個包含下拉框按鈕和下拉內容的 div 元素，設置其定位屬性為 relative。

接著，我們對下拉內容的 CSS 樣式進行了設置。其中，我們將下拉內容的 display 屬性設置為 none，即初始狀態下隱藏其內容。同時，我們對下拉內容的定位屬性進行了設置，使其相對于父元素進行絕對定位。我們還使用了 z-index 屬性，使下拉框的層次在頁面中處于較高位置。

我們使用了偽元素 ::before 來為下拉內容添加三角形樣式。通過設置偽元素的邊框屬性和定位屬性，我們創造了一個朝下的三角形。注意要將偽元素的定位位置調整到正確的位置以使三角形和下拉框對齊。

最后，通過使用:hover 偽類選擇器，我們設置了當鼠標在下拉框按鈕上懸停時的樣式。當鼠標懸停時，我們將下拉內容的 display 屬性設為 block，即顯示下拉內容。

通過以上代碼，我們就可以創建一個簡單的 CSS 三角形下拉框了。可以根據自己的需求進行樣式的調整和更改，達到更好的效果。