下拉菜單是網頁中常見的一種菜單形式，它能夠有效地節省頁面空間。在下拉菜單中，通常會有一個三角形圖標，用來指示用戶可以展開或收起菜單。那么，如何用CSS實現下拉菜單中的三角形圖標呢？ 我們可以使用CSS中的偽元素:before和:after來實現。具體地說，我們為下拉菜單設置一個menu類，然后為它的:before和:after元素設置一些基本樣式，如寬度、高度和邊框顏色等。最后，利用絕對定位和旋轉變換，將:before和:after元素旋轉45度或-45度，使它們成為一個三角形。 下面是一個實現下拉菜單三角形圖標的代碼示例：

.menu {
position: relative;
display: inline-block;
}
.menu:before, .menu:after {
content: "";
position: absolute;
border: solid;
border-color: transparent;
border-width: 5px;
width: 0;
height: 0;
}
.menu:before {
top: -10px;
left: 10px;
border-top-color: #000;
}
.menu:after {
top: -5px;
left: 15px;
border-top-color: #fff;
}
.menu.open:before {
transform: rotate(-45deg);
}
.menu.open:after {
transform: rotate(45deg);
}

在上面的代碼中，我們為.menu類設置了一個相對定位，使下拉菜單的:before和:after元素能夠相對于它來絕對定位。我們還為:before和:after元素設置了一些基本樣式，并將它們放置在不同的位置。在菜單展開時，我們利用transform屬性將元素旋轉45度或-45度，從而形成一個三角形。 需要注意的是，在展開和收起菜單時，我們需要為菜單添加.open類來修改樣式。 在使用上述CSS代碼實現下拉菜單的三角形圖標時，需要注意細節問題，比如顏色、位置、寬高比例等。不過，總的來說，利用CSS實現下拉菜單三角形圖標是一個相對簡單的操作，能夠有效地提升網頁的用戶體驗和可用性。