CSS三角形布局是現代網頁設計中常用的技巧之一，通過巧妙地運用CSS代碼，可以實現各種形狀的三角形。下面介紹幾種常用的CSS三角形布局技巧。

/* 一、上三角形 */
.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid #000;
}
/* 二、下三角形 */
.triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid #000;
}
/* 三、左三角形 */
.triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid #000;
border-bottom: 50px solid transparent;
}
/* 四、右三角形 */
.triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 50px solid #000;
border-bottom: 50px solid transparent;
}

以上代碼使用了CSS的border屬性，分別設置了不同方向的邊框寬度和顏色，形成了三角形。其中需要注意的是，在設置三角形樣式時，需要根據自己的需求調整寬度、高度和邊框寬度等參數。

除了以上幾種基本的三角形布局，還可以通過組合和變形等方式創造更多樣的三角形效果，例如：

/* 五、組合三角形 */
.triangle-combine {
width: 0;
height: 0;
border-top: 50px solid #000;
border-right: 50px solid transparent;
border-bottom: 50px solid #000;
border-left: 50px solid transparent;
}
/* 六、斜角三角形 */
.triangle-slope {
width: 100px;
height: 100px;
background-color: #000;
transform: skewX(-45deg);
}
/* 七、切角三角形 */
.triangle-cut {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-right: 60px solid #000;
border-bottom: 30px solid transparent;
clip-path: polygon(30px 0, 100% 0, calc(100% - 30px) 100%, 0 100%);
}

以上幾種三角形布局技巧都是利用CSS代碼實現的，對于前端開發人員或網頁設計者來說，掌握好這些技巧可以大幅提升布局和UI設計的效率和質量。