CSS 中提供了多種方法去畫出一個箭頭，這些方法包括使用 border 屬性、使用偽類、使用 transform 屬性等等。下面我們將一步步展示如何使用這些方法之一來繪制箭頭。

.arrow {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid black;
}

上面的代碼使用 border 屬性去創(chuàng)建一個三角形，并繼續(xù)在其右側(cè)創(chuàng)建一個長方形以組成一個箭頭。為了使箭頭變成尖銳形狀，你可以先將三角形兩側(cè)的 border 長度增大，并在其中一個方向上添加一個更小的 border 長度（這里是右側(cè)），從而讓箭頭變得更加銳利。

另外，如果你只想繪制一個簡單的右箭頭，那么可以使用一個單獨的 border，如下所示：

.arrow {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid black;
}

這里，我們使用一個三角形（即上下兩個 border 加上左側(cè) border）來繪制箭頭。如果你想使箭頭變?yōu)樽蠹^，那么可以使用 border-left 屬性代替 border-right 屬性即可。

除了使用 border 屬性，你還可以使用 transform 屬性來對箭頭進行繪制。對于一個向右的箭頭，可以使用以下代碼：

.arrow {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid black;
transform: rotate(45deg);
}

這里，我們先創(chuàng)建一個向左的三角形，然后使用 rotate() 函數(shù)將其旋轉(zhuǎn) 45 度以使箭頭指向右側(cè)。

最后一種方法是使用偽類 before 和 after 來繪制箭頭，如下：

.arrow {
display: inline-block;
position: relative;
}
.arrow:before {
content: "";
position: absolute;
top: 0;
left: -20px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid black;
}
.arrow:after {
content: "";
position: absolute;
top: 0;
right: -20px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid black;
}

在這里，我們使用偽類 before 和 after 分別創(chuàng)建向左和向右的箭頭。在這種情況下，我們需要設(shè)置 .arrow 的 position 屬性為 relative，以便偽類 before 和 after 相對于它進行定位。

總之，這里只展示了用 CSS 繪制箭頭的一些基本方式，通過更改參數(shù)和樣式，你可以根據(jù)需要進行調(diào)整以達到理想的效果。