倒三角（triangle-down）是在前端開發中經常使用的樣式之一，它通常用在導航欄或選項卡中，表示當前選中的頁面或欄目。在CSS中，可以用偽元素和邊框樣式來實現倒三角的效果。

/* 定義偽元素 */
.element::before {
content: "";
position: absolute;
}
/* 下箭頭 */
.element::before {
top: 100%;
left: 50%;
border: solid transparent;
border-width: 0 6px 6px 6px;
border-top-color: #333;
transform: translateX(-50%);
}
/* 上箭頭 */
.element::before {
bottom: 100%;
left: 50%;
border: solid transparent;
border-width: 6px 6px 0 6px;
border-bottom-color: #333;
transform: translateX(-50%);
}

其中，::before是偽元素的一種，表示在當前元素（.element）之前插入一個偽元素。在樣式中，使用content屬性指定偽元素的內容為空，然后用position屬性為偽元素設置絕對定位。接著，通過border屬性為倒三角定制邊框樣式，border-width定義邊框寬度，border-color指定邊框顏色。

為了讓倒三角能夠垂直居中在元素的下方或上方，我們需要用到transform屬性，將偽元素向左平移50%的寬度，使其水平居中。需要注意的是，該方法只適用于固定寬度的倒三角，對于自適應寬度的元素，需要另外處理。

最后，將偽元素的定位和樣式定義完成后，就可以在HTML結構中應用倒三角樣式了。例如：

<ul class="nav">
<li class="active"><a href="#">選項1</a></li>
<li><a href="#">選項2</a></li>
<li><a href="#">選項3</a></li>
</ul>

/* 將活動狀態的導航項設置為下箭頭 */
.nav li.active a::before {
top: 100%;
left: 50%;
border: solid transparent;
border-width: 0 6px 6px 6px;
border-top-color: #333;
transform: translateX(-50%);
}
/* 將普通狀態的導航項設置為上箭頭 */
.nav li a::before {
bottom: 100%;
left: 50%;
border: solid transparent;
border-width: 6px 6px 0 6px;
border-bottom-color: #333;
transform: translateX(-50%);
}

通過上述代碼可以看到，使用倒三角樣式來表示導航欄的活動狀態和普通狀態，代碼簡潔明了，同時也增加了頁面的可讀性。