CSS畫小箭頭

/* 創建一個div容器 */
.arrow {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 20px solid #999; /* 箭頭顏色 */
border-bottom: 10px solid transparent;
}
/* 將div容器變成一個三角形 */
.arrow:before {
position: absolute;
content: "";
left: -20px;
top: -10px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 20px solid #999;
border-bottom: 10px solid transparent;
transform: rotate(180deg); /* 將三角形轉過來 */
}

解釋：

首先，我們創建一個div容器，然后設置它的寬度和高度都為0，讓它看起來像是一個空心的矩形。

接下來，我們設置三個邊框，其中上邊框和下邊框都是10px，這樣就會形成一條直線。右邊框的寬度是20px，顏色為#999（灰色），這樣就形成了一個向右的三角形。

最后，我們使用:before偽元素創建一個相同的三角形，并將它旋轉180度，這樣它就可以連接到div容器的左側，形成一個封閉的箭頭。