在網頁設計中，小三角是一種常見的視覺元素，可以用于指示下拉菜單、展開折疊內容等功能。在 CSS 中，可以使用偽元素及 transform 屬性來生成小三角。

// 生成三角形
.arrow {
position: relative;
width: 0;
height: 0;
}
.arrow::before {
content: "";
position: absolute;
top: 0;
left: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #000 transparent;
transform: rotate(45deg);
}
// 生成倒三角
.inverted-arrow {
position: relative;
width: 0;
height: 0;
}
.inverted-arrow::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #000 transparent transparent transparent;
transform: rotate(45deg);
}

在以上代碼中，通過設置偽元素的 border 屬性并通過 transform 屬性旋轉，生成了一個從上部出發的小三角和一個從下部出發的倒三角。如果需要調整三角的大小或角度，可以調整 border 屬性的值或 transform 屬性的角度。