在CSS中可以使用偽元素（::before和::after）來實現(xiàn)純CSS畫三角形。以下是一些常見的三角形畫法：

/* 向上的三角形 */
.triangle-up {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid red;
}
/* 向下的三角形 */
.triangle-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid red;
}
/* 向左的三角形 */
.triangle-left {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid red;
}
/* 向右的三角形 */
.triangle-right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid red;
}

以上代碼中，每個三角形都有一個寬度為0，高度為0的盒子。使用border來定義三角形的邊框樣式，以達到畫三角的效果。不同的邊框搭配可以形成不同方向的三角形。

除了使用border以外，也可以使用transform進行旋轉來畫三角形。

/* 向上的三角形 */
.triangle-up {
width: 20px;
height: 20px;
transform: rotate(45deg);
border: 2px solid red;
border-right: none;
border-bottom: none;
}
/* 向下的三角形 */
.triangle-down {
width: 20px;
height: 20px;
transform: rotate(225deg);
border: 2px solid red;
border-top: none;
border-left: none;
}
/* 向左的三角形 */
.triangle-left {
width: 20px;
height: 20px;
transform: rotate(135deg);
border: 2px solid red;
border-top: none;
border-right: none;
}
/* 向右的三角形 */
.triangle-right {
width: 20px;
height: 20px;
transform: rotate(315deg);
border: 2px solid red;
border-bottom: none;
border-left: none;
}

以上代碼中，我們首先定義一個正方形的盒子，然后使用transform進行旋轉，以得到不同方向的三角形。通過去掉一些邊框，我們可以保證只有三角形的邊框被顯示出來。

通過使用偽元素或者transform，我們可以輕松地使用CSS畫出不同方向和不同形狀的三角形。