在網頁設計中，經常需要添加一些圖形裝飾來美化頁面，其中常用的一種是三角形和矩形的組合。而使用CSS可以很方便地實現這樣的效果。

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

上面的代碼演示了如何通過CSS來創建一個三角形和一個矩形。首先，我們利用CSS的邊框特性來定義一個等腰三角形，使用四個邊框分別對應三角形的三邊和一個沒有實際作用的底邊。邊框的顏色和樣式可以自由定義。需要注意的是，為了讓三角形垂直居中，需要將其高度的一半作為上下邊框的寬度。

而矩形的創建則簡單得多，只需要設置其寬度、高度和背景顏色即可。如果需要優化頁面的設計，可以將三角形和矩形組合起來，形成一個更加復雜的圖形。

最后，將上面的CSS代碼應用到HTML中即可實現效果。通過CSS的掌握，我們可以輕松地創造出各種形狀和效果，為網頁設計增添更多趣味和魅力。