CSS翻轉箭頭是網頁設計中常用的元素，它可以用來指示展開或收起的狀態。

下面是一個簡單的例子，顯示如何使用CSS創建一個簡單的向下箭頭：

.arrow-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid black;
}

代碼中，定義了一個類名為“arrow-down”的元素，寬高都為0。border-left和border-right屬性定義了向下箭頭左右的邊框，而border-top屬性定義了箭頭的尖端。最后，我們可以將這個類名添加到HTML頁面的任何元素中，從而創建一個向下箭頭。

為了創建一個向上箭頭，只需要用border-bottom替換border-top即可：

.arrow-up {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
}

我們也可以通過旋轉向下箭頭的方式來創建一個向上箭頭，只需要使用transform: rotate(180deg)：

.arrow-up {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid black;
transform: rotate(180deg);
}

代碼中，我們使用transform屬性將箭頭旋轉了180度，以形成向上箭頭。

以上就是CSS翻轉箭頭的簡介。通過組合不同的CSS屬性和值，我們可以創建各種形狀和方向的箭頭，從而為網頁設計增加更多的視覺效果。