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设计的效率和质量。