使用 CSS 繪制帶箭頭的直線是一種常見的需求。這種線條常常被用于指示某個元素的方向，或者用作分割線。下面我們來介紹一下如何使用 CSS 實現帶箭頭的直線。 首先，我們需要定義一個基本的樣式。這個樣式用于定義直線的基本形狀，包括線條的寬度、顏色以及位置。代碼如下：

.line {
position: relative; /*相對定位*/
width: 100px; /*線條的寬度*/
height: 0; /*高度為0*/
margin: 10px 0; /*設置頂部和底部的邊距*/
border-top: 1px solid #000; /*頂部邊框*/
}

接下來，我們需要添加一個三角形的樣式。這個樣式定義了三角形的大小、顏色以及位置。代碼如下：

.line:before {
content: ""; /*空內容*/
position: absolute; /*絕對定位*/
top: -5px; /*與頂部存在一定距離*/
left: 50%; /*左側偏移百分之五十*/
margin-left: -5px; /*將三角形向左移動五個像素*/
border-top: 5px solid #000; /*設置三角形的樣式*/
border-right: 5px solid transparent; /*隱藏三角形右邊的邊*/
border-left: 5px solid transparent; /*隱藏三角形左邊的邊*/
}

最后，我們需要添加一個箭頭的樣式。這個樣式定義了箭頭的大小、顏色以及位置。代碼如下：

.line:after {
content: ""; /*空內容*/
position: absolute; /*絕對定位*/
bottom: -5px; /*與底部存在一定距離*/
left: 50%; /*左側偏移百分之五十*/
margin-left: -5px; /*將箭頭向左移動五個像素*/
border-bottom: 5px solid #000; /*設置箭頭的樣式*/
border-right: 5px solid transparent; /*隱藏箭頭右邊的邊*/
border-left: 5px solid transparent; /*隱藏箭頭左邊的邊*/
}

完成上述步驟后，我們就可以得到一個帶箭頭的直線了。將上述代碼添加到 HTML 文件中，然后給需要添加直線的元素添加 class="line" 就可以了。帶箭頭的直線就成了你網頁中的實用工具。