在實際開發中，我們經常會使用到一些簡單的圖形，比如讓一個按鈕或者下拉框的箭頭變成倒三角形狀。而使用 CSS 實現倒三角的效果十分簡單，但是有時卻會遇到一個問題：倒三角的大小占用了過多的空間。

.triangle-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid #000;
}

以上是一個簡單的倒三角生成的代碼，但是這種生成方式會在頁面上占用的空間非常大，很難達到我們的預期效果。

那么，有什么好的方法能夠達到我們預期的效果，占用更小的頁面空間呢？以下是一種解決方案：

.triangle-down {
position: relative;
width: 0;
height: 0;
margin-left: 5px;  /*左邊距等于右邊框寬度*/
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid #000;
/*將多余的部分隱藏*/
overflow: hidden;
}
.triangle-down::before{
content: '';
display: block;
position: absolute;
top: 0;
left: -5px; /*左側的虛線部分*/
width: 0;
height: 10px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid #000;
}

以上是改進后的倒三角代碼。通過
before
偽元素設置一個一半大小且顏色與背景顏色一致的倒三角來覆蓋原始的倒三角，這樣可以大大減少所占用的頁面空間。

通過這種方法，我們不僅能實現倒三角形狀，并且不會占用過多的頁面空間。在實際開發中，這種解決方案適用于一些需要體積小，同時又需要定義一些交互樣式的UI組件中。