CSS中有一種很實(shí)用的屬性，可以用來(lái)制作三角形。這種屬性就是border，通過(guò)設(shè)定border的寬度和顏色，可以制作出不同形狀的三角形。

.triangle {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent #007bff transparent;
}

上面的代碼就是示范如何制作一個(gè)底邊長(zhǎng)為40px，高為40px，顏色為#007bff的三角形。其中，只需要設(shè)定一個(gè)方向的border顏色為想要的顏色，其余三個(gè)方向設(shè)置為透明即可。需要注意的是，三角形的寬高由border的寬度來(lái)決定，其中橫向的寬度為底邊長(zhǎng)的兩倍。

如果想要制作不同角度的三角形，可以調(diào)整border的寬度和頂點(diǎn)位置。

.triangle-right {
width: 0;
height: 0;
border-width: 20px 0 20px 40px;
border-style: solid;
border-color: transparent transparent transparent #28a745;
}

上面代碼制作了一個(gè)底邊長(zhǎng)為40px，高為40px，頂點(diǎn)向右的綠色三角形。使用了如下的border屬性:

border-width: 20px 0 20px 40px;

第一個(gè)值為頂部border的寬度，第二個(gè)值為右側(cè)border的寬度，第三個(gè)值為底部border的寬度，第四個(gè)值為左側(cè)border的寬度。這里只設(shè)置了右側(cè)和底部?jī)蓚€(gè)border的寬度，左側(cè)和頂部的border寬度由default值0自動(dòng)生成。

總的來(lái)說(shuō)，border屬性的三角形效果比使用圖片要快捷方便，而且可以通過(guò)組合border屬性來(lái)制作出多樣的三角形。