CSS實現空心小箭頭的方法

.arrow-up{
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #FFF;
}
.arrow-down{
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #FFF;
}
.arrow-right{
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #FFF;
}
.arrow-left{
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #FFF;
}

如上所示，我們可以使用border屬性實現一個空心小箭頭。需要注意的是，這里的寬度和高度都為0，實際上并沒有任何面積，所以箭頭的大小需要根據需求設置邊框的寬度以達到想要的大小。

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

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

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

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