許多網站中，經常會有一些小三角的圖形，比如下拉菜單的箭頭、頁眉頁腳中的分割線、提示框的指向等等。這些小三角看似簡單，但用CSS實現起來也有不同的方法。

第一種方法是使用border屬性。這種方法最簡單易懂，如果要做倒三角，則將border-top的長度設置為0，border-left和border-right的長度相等，且都大于0。反之，如果要做正三角，則將border-left和border-right的長度設置為0，border-top的長度大于0。具體代碼如下：

.triangle {
width: 0;
height: 0;
border-style: solid;
}
.triangle-down {
border-width: 0 10px 10px 10px;
border-color: transparent transparent #000 transparent;
}
.triangle-up {
border-width: 10px 10px 0 10px;
border-color: #000 transparent transparent transparent;
}

第二種方法是使用偽元素before和after。這種方法需要將父元素設置為相對定位，再讓偽元素絕對定位。具體代碼如下：

.triangle-container {
position: relative;
}
.triangle-container:before {
content: "";
position: absolute;
top: -10px;
left: 50%;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #000 transparent transparent transparent;
transform: translateX(-50%);
}
.triangle-container:after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #000 transparent;
transform: translateX(-50%);
}

隨著CSS3的發展，我們還可以使用transform屬性來實現各種小三角。比如，將一個正方形旋轉45度，就可以得到一個正菱形。具體代碼如下：

.diamond {
width: 40px;
height: 40px;
background-color: #000;
transform: rotate(45deg);
}

總之，CSS實現各種小三角并不困難，不同的場景可以選擇不同的實現方式。