在 CSS 中，經(jīng)常需要使用小箭頭來表示多種狀態(tài)，比如向上的小箭頭表示某個元素可展開，已經(jīng)展開的元素則需要將小箭頭指向下方來表示已經(jīng)展開。接下來，我們就來介紹一下如何使用 CSS 代碼來繪制向上的小箭頭。

.up-arrow {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 6px solid #666;
}

上面的代碼定義了一個具有三角形形狀的元素。該元素的寬度和高度都為 0，其中左右邊框設(shè)為透明色，底邊框?yàn)榛疑@樣就形成了一個向上的小箭頭。

接下來，我們可以為箭頭元素設(shè)置不同的樣式來表示不同的狀態(tài)。比如，為了展示箭頭處于可展開狀態(tài)，我們可以通過旋轉(zhuǎn)箭頭來表示已經(jīng)展開的狀態(tài)，代碼如下：

.up-arrow.expand {
transform: rotate(180deg);
}

通過使用 transform 屬性并旋轉(zhuǎn)箭頭，我們可以讓箭頭指向下方，從而表示箭頭所在的元素已經(jīng)展開。

綜上所述，我們可以通過簡單的 CSS 代碼來繪制小箭頭并表現(xiàn)不同的狀態(tài)，這為我們的網(wǎng)頁設(shè)計(jì)帶來了更多的想象空間。