CSS生成三角形是網頁設計中常用的技巧之一，可以使設計更加靈活和多樣化。下面將介紹幾種生成三角形的CSS方法。

/* 第一種方法 */
.triangle-up {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid #ff0000;
}
/* 第二種方法 */
.triangle-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #00ff00;
}
/* 第三種方法 */
.triangle-left {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-right: 20px solid #0000ff;
border-bottom: 20px solid transparent;
}
/* 第四種方法 */
.triangle-right {
width: 0;
height: 0;
border-top: 20px solid transparent;
border-left: 20px solid #cccccc;
border-bottom: 20px solid transparent;
}

以上四種方法分別可以生成向上、向下、向左和向右的三角形。其中，利用了邊框的特性，通過對不同的方向上的邊框進行設置，實現不同方向的三角形效果。

CSS生成三角形是一種簡單實用的技巧，能夠為網頁設計帶來更加多樣化的效果，為網頁設計帶來更加豐富的元素。