CSS3中的border-radius屬性能夠讓我們實(shí)現(xiàn)圓角效果，而配合一些技巧，我們還可以使用border屬性來(lái)實(shí)現(xiàn)三角形的效果。

.triangle {
border: 20px solid transparent;
border-bottom-color: orange;
}

上述代碼中，我們使用了一個(gè)矩形的邊框，然后將除了下邊框以外的邊框顏色設(shè)置為透明色，最后將下邊框顏色設(shè)置為矩形的填充色，這樣就可以形成一個(gè)三角形。

除了使用border屬性，我們還可以使用:before和:after偽元素來(lái)實(shí)現(xiàn)三角形的效果，這種方法的好處是可以讓三角形擁有圓角效果。

.triangle {
position: relative;
width: 60px;
height: 60px;
background-color: orange;
border-radius: 10px;
}
.triangle:before {
content:"";
position: absolute;
bottom: -15px;
left: 10px;
border: 15px solid transparent;
border-top-color: orange;
}
.triangle:after {
content:"";
position: absolute;
bottom: -15px;
right: 10px;
border: 15px solid transparent;
border-top-color: orange;
}

上述代碼中，我們先創(chuàng)建一個(gè)帶有圓角的矩形，然后使用:before和:after偽元素來(lái)創(chuàng)建兩個(gè)箭頭。其中，通過(guò)設(shè)置border屬性來(lái)創(chuàng)建箭頭，border-top-color用來(lái)設(shè)置箭頭的顏色。

CSS3中，我們可以使用很多方法來(lái)實(shí)現(xiàn)三角形和圓角的效果，這些技巧可以讓我們更好地完成網(wǎng)頁(yè)設(shè)計(jì)和布局。