CSS中我們可以使用一個(gè)神奇的技巧來創(chuàng)建各種不同形狀的圖案，這里我們介紹如何使用CSS創(chuàng)建三角形。

.triangle {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #ccc;
border-bottom: 50px solid transparent;
}

以上代碼中，我們?yōu)橐粋€(gè)div元素設(shè)置了CSS樣式，其中設(shè)置了寬度（width）和高度（height）屬性為0，因?yàn)槲覀円迷氐倪吙騺韯?chuàng)建三角形。接著，我們設(shè)置border屬性的上邊框（border-top）和下邊框（border-bottom）為透明色，這樣就能只顯示左右兩邊的邊框。然后，設(shè)置右邊框（border-right）的寬度（100px）和顏色（#ccc），這里的寬度可以根據(jù)需要進(jìn)行調(diào)整。

這個(gè)方法創(chuàng)建出的三角形是等腰直角三角形，如果需要?jiǎng)?chuàng)建不同類型的三角形，可以通過修改border屬性的值來實(shí)現(xiàn)。比如，如果要?jiǎng)?chuàng)建等邊三角形，可以將border-top和border-bottom的寬度設(shè)置為相同的值，而不是透明色；如果要?jiǎng)?chuàng)建斜邊三角形，可以將border-right換成border-left或border-bottom。

這種用CSS創(chuàng)建圖形的方法可以避免使用圖片，可以大大減少網(wǎng)站的加載時(shí)間，并且可以動(dòng)態(tài)地改變圖形的顏色、大小和形狀，非常適合用于頁面布局和裝飾。