CSS如何制作箭頭？ CSS制作箭頭，可以用到CSS的border、transform、position等屬性。下面來詳細(xì)介紹。 1. 使用border屬性制作箭頭 箭頭可以通過給一個(gè)div設(shè)置border來實(shí)現(xiàn)。假如我們需要制作一個(gè)向右的箭頭，可以將三個(gè)邊框設(shè)置為透明，一個(gè)邊框設(shè)置為帶顏色的線條，并且將其旋轉(zhuǎn)45度。 例如： ```html

使用border屬性制作向右的箭頭：

```css .right-arrow { width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 15px solid #000; transform: rotate(45deg); } ``` 運(yùn)行代碼，就能得到一個(gè)向右的箭頭。 2. 使用transform屬性制作箭頭 transform屬性可以控制一個(gè)元素的旋轉(zhuǎn)、縮放、移動(dòng)等。我們可以利用rotate()函數(shù)來對一個(gè)div進(jìn)行旋轉(zhuǎn)操作，從而制作出箭頭的效果。 例如： ```html

使用transform屬性制作向上的箭頭：

```css .up-arrow { width: 20px; height: 20px; border-left: 2px solid #000; border-top: 2px solid #000; transform: rotate(-45deg); transform-origin: center center; } ``` 上面的代碼表示，將一個(gè)20x20的div旋轉(zhuǎn)45度，實(shí)現(xiàn)向上的箭頭效果。 3. 使用position屬性制作箭頭 使用position屬性結(jié)合:before或:after偽元素可以實(shí)現(xiàn)不需要額外元素的箭頭制作。 例如： ```html

使用position屬性制作向下的箭頭：

```css .down-arrow { width: 0; height: 0; position: relative; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #000; } .down-arrow:before { content: ""; position: absolute; bottom: -10px; left: 0; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #000; } ``` 上述代碼表示，在arrow類的div中加入一個(gè)偽元素:before，內(nèi)容為空。利用position屬性的absolute生成另一個(gè)三角形，它位于原三角形的下方，創(chuàng)建的兩個(gè)三角形一起形成箭頭。 以上就是幾種制作箭頭的方法，可以根據(jù)需要選擇合適的方式進(jìn)行應(yīng)用。