CSS作為前端開發中不可或缺的一部分，應用非常廣泛。今天，我們來談一下如何使用CSS畫下拉箭頭。

/* 首先，我們需要一個三角形 */
.arrow {
border: solid #555;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

上面的代碼會畫出一個指向右下角的三角形。接下來，我們需要對它進行變形，變成下拉箭頭。

/* 縮小 */
.arrow {
transform: rotate(45deg) scale(0.5);
-webkit-transform: rotate(45deg) scale(0.5);
}
/* 定位 */
.arrow {
position: relative;
top: 4px;
left: -2px;
}

現在我們得到了一個簡單的下拉箭頭。接下來，我們可以對它進行美化。

/* 顏色和陰影 */
.arrow {
border-color: #888;
box-shadow: 1px 1px 1px #ccc;
}
/* 動畫 */
.arrow {
transition: transform 0.2s;
-webkit-transition: transform 0.2s;
}
.arrow:hover {
transform: rotate(45deg) scale(0.6);
-webkit-transform: rotate(45deg) scale(0.6);
}

現在，我們得到了一個比較美觀的下拉箭頭。你可以根據實際需求，自定義它的樣式和動畫。