CSS三角代碼是網頁開發中常用的樣式元素之一，其可以通過CSS的偽元素（:before 和 :after）和邊框樣式來實現。

/* 創建一個向下的三角 */
.triangle-down {
width: 0;
height: 0;
border-style: solid;
border-width: 0 5px 5px 5px;
border-color: transparent transparent #555 transparent;
}

上述代碼中，將 width 和 height 設為 0，通過設置邊框的樣式和顏色使其變為一個三角形。border-width 屬性用來控制邊框的寬度，這里設置底邊寬度為 5px。

/* 創建一個向上的三角 */
.triangle-up {
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 0 5px;
border-color: #555 transparent transparent transparent;
}

同樣地，通過設置不同的 border-width 和 border-color 來創建不同方向的三角。這里設置上邊寬度為 5px。

/* 創建一個向左的三角 */
.triangle-left {
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 5px;
border-color: transparent transparent transparent #555;
}

同理，設置左邊寬度為 5px 即可實現向左的三角形。

/* 創建一個向右的三角 */
.triangle-right {
width: 0;
height: 0;
border-style: solid;
border-width: 5px 5px 5px 0;
border-color: transparent #555 transparent transparent;
}

將右邊邊寬度改為 5px 即可實現向右的三角形。

總結來說，通過設置不同的邊框樣式和顏色，和調整邊框的寬度和高度，我們可以輕松地創建出各種不同方向的三角形。