CSS 中常用的元素之一是箭頭，而常見的箭頭形狀有許多種，其中較為特殊的就是長方形箭頭。長方形箭頭在一些 UI 設計中使用較為頻繁，下面我們來介紹一下如何利用 CSS 來實現一個長方形箭頭。

.arrow {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-left: 20px solid red;
border-bottom: 10px solid transparent;
display: inline-block;
}

代碼的實現思路是通過三條邊框的組合來實現長方形箭頭的效果，具體包括一個上三角形，一個下三角形和一個矩形。其中上下三角形的寬度都為 0 以達到長方形的效果，而矩形就是實現箭頭的長度了。

進一步講解，border-top, border-left 和 border-bottom 分別用于定義上三角形，左矩形和下三角形，它們的顏色可根據實際需求自行更改。后面跟上具體的定義數值，如長、寬、顏色等等。而預設的 border-right 沒有被使用，是因為我們不需要使用右邊的三角形。display: inline-block 這一行的作用是讓箭頭能夠相鄰而不換行出現。

這個代碼的好處是簡單易懂，只要稍加改動就可以實現不同顏色和不同尺寸的長方形箭頭。