CSS中，我們可以很方便地為矩形添加各種形狀的圖形，其中最常見(jiàn)也最簡(jiǎn)單的就是為矩形左側(cè)添加一個(gè)三角形。這不僅可以增加頁(yè)面的趣味性和美觀度，還能有效地引導(dǎo)用戶(hù)的注意力。

.triangle {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-right: 30px solid #ff0000;
border-bottom: 30px solid transparent;
float: left;
}
.rect {
width: 200px;
height: 60px;
background-color: #ff0000;
float:left;
}

上面的CSS代碼就是為矩形左側(cè)添加三角形的示例代碼。其中，.triangle是三角形的樣式，它的寬度和高度都是0，因?yàn)槲覀儗⑹褂盟倪吙騺?lái)形成三角形。border-top和border-bottom都是30px，這即為三角形的高度；border-right為30px，即為三角形的寬度。

接著，我們將讓這個(gè)三角形浮動(dòng)到矩形的左側(cè)，和矩形并排顯示。因此，我們需要新建一個(gè)樣式.rect，設(shè)置其寬度和高度，同時(shí)還要設(shè)置背景色。

最后，在HTML代碼中，只需要將這兩個(gè)樣式都應(yīng)用到一個(gè)div容器中，就可以讓矩形左側(cè)出現(xiàn)一個(gè)漂亮的三角形了！

<div class="container">
<div class="triangle"></div>
<div class="rect"></div>
</div>

在實(shí)際應(yīng)用中，我們可以根據(jù)需要調(diào)整三角形的大小、顏色、位置等，使其更好地融入頁(yè)面的設(shè)計(jì)中。