CSS箭頭制作在網頁設計中是一個常見的需求，它可以用于標注、導航、工具提示等多種場合。下面介紹一下如何使用CSS代碼來制作箭頭。

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

代碼中使用了border屬性來繪制箭頭，其中height和width屬性分別指定了箭頭的高度和寬度。border-top和border-bottom屬性設置了頂部和底部的空白區域，而border-left屬性則設置了箭頭的樣式和顏色。

除了這種基本的箭頭樣式，我們還可以使用偽元素來制作更加靈活多樣的箭頭效果。例如下面這個雙向箭頭：

.arrow {
position: relative;
width: 100px;
height: 100px;
}
.arrow:before,
.arrow:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-style: solid;
}
.arrow:before {
border-width: 20px 30px 0 30px;
border-color: #ccc transparent transparent transparent;
margin-top: -10px;
margin-left: -30px;
}
.arrow:after {
border-width: 0 30px 20px 30px;
border-color: transparent transparent #ccc transparent;
margin-top: 10px;
margin-left: -30px;
}

這段代碼中使用了偽元素:before和:after來分別繪制箭頭的上部和下部。通過設置不同的寬度、高度、邊框樣式和顏色，我們可以自由地調整箭頭的形狀和風格。同時，使用position屬性將箭頭位置指定為相對定位，可以方便地在其他元素中調整箭頭的位置和大小。

在實際應用中，我們可以根據實際需要，靈活運用CSS箭頭制作技巧，打造更加美觀實用的網頁設計。