在前端開發(fā)中，我們常常需要繪制不同形狀的圖形來優(yōu)化網(wǎng)頁的展示效果。其中，矩形和三角形都是常見的基本形狀。在實現(xiàn)這些形狀時，CSS是一個非常好用的工具，可以幫助我們輕松實現(xiàn)各種形狀的效果。

/* 矩形 */
.rect{
width: 100px;
height: 50px;
background-color: #ccc;
border: 1px solid #999;
}
/* 三角形 */
.triangle{
width: 0;
height: 0;
border-top: 50px solid #ccc;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}

以矩形為例，我們定義一個CSS類名.rect，并設(shè)置該元素的寬度為100px，高度為50px，背景顏色為#ccc，邊框為1px實線的灰色。

而三角形則需要利用border屬性的特殊性質(zhì)來實現(xiàn)。我們定義一個CSS類名.triangle，將該元素的寬高設(shè)為0，但是利用border-top來設(shè)置邊框的上方向，同時讓另外兩個邊框border-left和border-right變?yōu)橥该鳎瑏磉_(dá)到三角形的形狀。

相信通過上述代碼示例，大家可以發(fā)現(xiàn)，利用純CSS就可以實現(xiàn)各種形狀的效果，非常簡單方便。值得注意的是，在實現(xiàn)特殊形狀時，我們要充分利用CSS屬性和CSS選擇器的特性，可以極大地提升我們開發(fā)效率，減少代碼冗余。