CSS3是一種非常強(qiáng)大的網(wǎng)頁樣式語言，它為我們提供了很多方便的功能，使得我們可以在網(wǎng)頁上實(shí)現(xiàn)各種各樣的效果。其中，CSS3可以用很簡(jiǎn)單的代碼實(shí)現(xiàn)三角形帶邊框的基本形狀。

/* 下箭頭 */
.arrow-down {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #000;
border-bottom: 10px solid transparent;
}
/* 上箭頭 */
.arrow-up {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid transparent;
border-bottom: 10px solid #000;
}
/* 左箭頭 */
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid #000;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
}
/* 右箭頭 */
.arrow-right {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #000;
}

上面的CSS代碼中，我們可以看到，三角形的基本屬性就是width和height，因?yàn)樗且粋€(gè)幻像，實(shí)際上只是外邊框的改變。接下來我們就可以通過border的屬性來實(shí)現(xiàn)三角形的形狀，每個(gè)角落的邊框形狀需要不同的參數(shù)，例如上面的代碼中，如果要實(shí)現(xiàn)不同的大小和顏色的三角形，只需要修改border的值即可。