在 CSS 中，有一個(gè)非常常用的屬性叫做三角屬性。這個(gè)屬性可以讓我們輕松地在網(wǎng)頁(yè)中創(chuàng)建各種各樣的三角形元素。下面來(lái)詳細(xì)介紹一下 CSS 中的三角屬性。

/* 等腰直角三角形 */
.triangle {
border-top: 50px solid #f00;
border-right: 50px solid transparent;
}
/* 正三角形 */
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #f00;
}
/* 等邊三角形 */
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 86.6px solid #f00;
}

上述代碼演示了三種不同類(lèi)型的三角形。
第一個(gè)樣式是等腰直角三角形，通過(guò)設(shè)置一個(gè)邊框?qū)挾葹?0 的元素的上邊框和右邊框顏色，從而形成一個(gè)直角等腰三角形；
第二個(gè)樣式是正三角形，通過(guò)設(shè)置一個(gè)寬度和高度都為 0 的元素，以及三條邊框的顏色，從而形成一個(gè)等邊正三角形；
第三個(gè)樣式是等邊三角形，通過(guò)和正三角形相似的設(shè)置方式，只需調(diào)整邊框的長(zhǎng)度，就可以形成一個(gè)等邊三角形。
這些三角屬性雖然簡(jiǎn)單，但對(duì)網(wǎng)頁(yè)布局和樣式的設(shè)計(jì)有著非常大的幫助和作用。