在CSS中，我們可以使用偽元素（pseudo elements）和CSS屬性transform來(lái)在矩形上繪制三角形，使其成為非常有用的UI元素。

/* 用CSS的偽元素after來(lái)創(chuàng)造一個(gè)三角形 */
.triangle {
position: relative;
width: 0;
height: 0;
border-style: solid;
border-width: 0 75px 130px 75px;
border-color: transparent transparent #007bff transparent;
}
/* 可以改變triangle類(lèi)所擴(kuò)展的矩形大小和其位置 */
.triangle:after {
content: "";
position: absolute;
bottom: -130px;
left: -75px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 75px 130px 75px;
border-color: transparent transparent #fff transparent;
transform: rotate(180deg);
}

在上面的例子中，我們使用了一個(gè)叫做"border"的CSS屬性，他可以在CSS矩形的邊框上創(chuàng)建出各種形態(tài)的設(shè)計(jì)。"border-style"和"border-width"屬性配置了三角形的形狀，"border-color"屬性規(guī)定了顏色。

接著，我們使用"position"、"bottom"、"left"屬性來(lái)放置偽元素，"content"屬性來(lái)插入三角形，"rotate"屬性使三角形翻轉(zhuǎn)。

利用上述技術(shù)，可以輕松地在CSS中繪制不同顏色、不同形狀、不同大小的三角形，讓頁(yè)面造型變得更加美觀動(dòng)人，同時(shí)也增加了用戶(hù)體驗(yàn)。