CSS是網頁設計中不可或缺的一部分，它可以讓我們輕松地實現各種各樣的樣式效果。在本文中，我們將學習如何使用CSS編寫形箭頭樣式。

<style>
.arrow {
width: 0; 
height: 0; 
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid black;
}
</style>
<div class="arrow"></div>

在上面的代碼中，我們使用border屬性來創建三角形。設置其寬度和高度為0，則只有邊框顯示出來，且上下邊框同時存在就可以形成三角形。

在箭頭的右側，我們設置邊框為黑色，寬度為20px，因此三角形的大小也是20px。

<style>
.arrow {
width: 0; 
height: 0; 
border-top: 20px solid red;
border-bottom: 20px solid red;
border-right: 20px solid transparent;
}
</style>
<div class="arrow"></div>

如果我們要創建帶箭頭邊框的元素，可以將箭頭放在元素的邊框上方。下面的代碼使用紅色和透明邊框創建了一個箭頭邊框的div:

<style>
.arrow-box {
border: 3px solid red;
padding: 10px;
position: relative;
}
.arrow-box:before {
content: "";
position: absolute;
border: 20px solid transparent;
border-right-color: red;
top: 50%;
margin-top: -20px;
left: -40px;
}
</style>
<div class="arrow-box">這是一個帶箭頭邊框的盒子</div>

在上面的代碼中，我們使用了:before偽元素來創建箭頭。我們設置其寬度和高度為0，然后設置三個相鄰的邊框為透明，右側邊框為紅色。這樣就形成了一個三角形。使用position和margin來使箭頭垂直居中。

通過學習上述CSS形箭頭樣式，我們可以輕松地實現各種各樣的箭頭效果，使網頁設計更加豐富多彩。