CSS是前端開發中的必備技能之一，常常需要用到一些圖標來美化頁面，其中常用的一個圖標就是向上的箭頭，下面來介紹一下這個圖標怎么用CSS來實現。

首先，我們可以使用偽元素來創建一個箭頭。偽元素通常使用的是::before和::after選擇器，它們可以在一個元素的內容之前或之后插入一個虛擬的元素。我們就可以用它們來插入一個箭頭圖標。

.arrow::before {
content: '';
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}

這個代碼會在具有arrow類名的元素之前插入一個虛擬元素。具體來講，我們通過border屬性來畫出箭頭的三邊形形狀。然后使用transform屬性使箭頭旋轉到正確的方向。最后使用display屬性將箭頭設置為行內塊元素，并添加一些內邊距來使它看起來更美觀。

此外，我們還可以通過改變顏色和大小來進一步自定義箭頭。例如：

.arrow-red::before {
border-color: red;
}
.arrow-large::before {
font-size: 24px;
color: blue;
}

這兩個代碼會使箭頭變成紅色，或者增加字體大小并把顏色改為藍色。

最后，我們只需要在HTML中加上一個類名來應用這個箭頭。例如：

<div class="arrow arrow-red"></div>

這個代碼會創建一個帶有紅色箭頭的空的