在 CSS 中，畫向下的箭頭非常簡單。我們可以使用偽元素實現，方法如下：

.arrow-down {
position: relative;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid black;
}
.arrow-down::after {
content: "";
position: absolute;
top: 12px;
left: -10px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid white;
}

代碼解析：

首先，我們為箭頭設置了一個固定大小的容器，寬度為 0，高度為 0。然后我們定義了三個邊框，左右兩邊為透明的，頂部為黑色的，最后形成了一個三角形。接著，我們使用偽元素 ::after 創建了一個白色的三角形，放在黑色三角形的上面，形成了一個空心的箭頭。