在web開發中，常常需要使用小三角圖標來表示不同的信息或操作，如下拉菜單、選項卡、提示框等等。CSS可以很方便地畫出這些小圖標，下面讓我們來一起學習一下它的實現方法。

/* 下拉菜單 */
.dropdown {
position: relative;
}
.dropdown::after {
content: "";
display: block;
border: 5px solid transparent;
border-top-color: #000;
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
}
/* 選項卡 */
.tab {
position: relative;
}
.tab::after {
content: "";
display: block;
border: 5px solid transparent;
border-top-color: #000;
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
}
/* 提示框 */
.tooltip {
position: relative;
}
.tooltip::before {
content: "";
display: block;
border: 5px solid transparent;
border-right-color: #000;
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
}
/* 向左的小三角 */
.arrow-left {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-right: 10px solid #000;
border-bottom: 5px solid transparent;
}
/* 向右的小三角 */
.arrow-right {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-left: 10px solid #000;
border-bottom: 5px solid transparent;
}

以上代碼給出了一些常見的小三角圖標的樣式設置方法，通過了解它們的實現原理，我們可以根據實際需要進行相應的修改和擴展。