CSS做引導箭頭樣式是一種常見的前端編程技術。引導箭頭可以用于提示用戶如何正確操作網站和應用程序。若想實現一個漂亮而實用的引導箭頭，需要掌握一些常用的CSS屬性和技巧。

.arrow {
position: relative;
display: inline-block;
}
.arrow:after {
content: "";
position: absolute;
top: 50%;
right: -10px;
margin-top: -5px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 10px solid #333;
}

上面的代碼是一個基本的引導箭頭樣式。通過設置“arrow”類的“position”屬性為“relative”，使它在文檔流中占據空間，用于顯示箭頭，而不會影響其他元素的布局。接下來，在“arrow:after”偽類中設置箭頭的具體樣式和位置。將箭頭的“content”屬性設置為空字符串，因為箭頭本身不需要顯示任何文本。箭頭通過“border-top”、“border-bottom”和“border-left”三個屬性繪制。其中，“border-left”屬性的寬度為10px，是為了讓箭頭看起來更突出。

.arrow {
position: relative;
display: inline-block;
}
.arrow:after {
content: "";
position: absolute;
top: 50%;
right: -10px;
margin-top: -5px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 10px solid #333;
}
.arrow.top {
transform: rotate(180deg);
}
.arrow.left:after {
right: auto;
left: -10px;
bottom: -5px;
margin-top: 0;
margin-bottom: -5px;
border-top: 5px solid #333;
border-right: none;
}
.arrow.right:after {
left: auto;
right: -10px;
bottom: -5px;
margin-top: 0;
margin-bottom: -5px;
border-top: 5px solid #333;
border-left: none;
}

上面的代碼實現了三種常見的引導箭頭樣式：向上的箭頭、“左箭頭”和“右箭頭”。其中，“.top”類使箭頭朝上，使用“transform: rotate(180deg)”實現旋轉。對于“左箭頭”和“右箭頭”，需要在箭頭的基本樣式上添加一些屬性才能顯示出來。這在代碼中通過添加“.left”和“.right”類來完成。注意到，“left”類中設置“right”為“auto”，因為箭頭需要出現在目標元素左側，而“right”屬性在這種情況下不適用。相應地，在“right”類中將“left”設置為“auto”。