本文目錄導(dǎo)讀：

1. 使用偽元素創(chuàng)建箭頭
2. 使用邊框創(chuàng)建箭頭

如何用CSS寫箭頭？

CSS是一種強大的樣式表語言，可以用來描述HTML文檔的外觀和格式，在CSS中，我們可以使用偽元素（::before和::after）或者邊框（border）屬性來創(chuàng)建箭頭。

使用偽元素創(chuàng)建箭頭

偽元素::before和::after可以用來在元素的內(nèi)容前后插入內(nèi)容，我們可以利用這個特性，結(jié)合CSS的transform屬性，來創(chuàng)建一個箭頭。

以下代碼創(chuàng)建了一個指向右側(cè)的箭頭：

.arrow-right::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 10px solid #000;
}

在這個例子中，我們首先在.arrow-right元素的偽元素::after中創(chuàng)建一個空的content，然后通過設(shè)置position屬性將箭頭定位在元素的右側(cè)，我們設(shè)置border-top和border-bottom屬性為5px solid transparent，border-left屬性為10px solid #000，來創(chuàng)建一個指向右側(cè)的箭頭。

使用邊框創(chuàng)建箭頭

除了使用偽元素外，我們還可以利用CSS的邊框?qū)傩詠韯?chuàng)建箭頭，以下是一個簡單的例子：

.arrow-left {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 20px solid #000;
}

在這個例子中，我們創(chuàng)建一個寬度和高度都為0的元素，然后通過設(shè)置border-top和border-bottom屬性為10px solid transparent，border-right屬性為20px solid #000，來創(chuàng)建一個指向左側(cè)的箭頭。

就是用CSS寫箭頭的兩種方法，你可以根據(jù)自己的需求選擇適合的方法。