CSS可以通過偽元素和邊框樣式來實現三角形的效果。

/* 使用偽元素after和邊框樣式，實現向下的三角形 */
.triangle-down:before {
content: "";
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #000000 transparent;
}
/* 使用偽元素before和邊框樣式，實現向上的三角形 */
.triangle-up:after {
content: "";
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #000000 transparent transparent transparent;
}
/* 使用偽元素after和邊框樣式，實現向左的三角形 */
.triangle-left:before {
content: "";
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #000000 transparent transparent;
}
/* 使用偽元素before和邊框樣式，實現向右的三角形 */
.triangle-right:after {
content: "";
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #000000;
}

通過上面的代碼，可以輕松實現四個方向的三角形效果。只需要在對應的HTML元素上添加CSS類，就可以顯示出期望的效果。