CSS中的三角形可以用來(lái)作為箭頭，指向某個(gè)方向或者表示某個(gè)狀態(tài)。下面介紹幾種常見(jiàn)的三角形寫法。

1. border屬性實(shí)現(xiàn)

.triangle {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #000000;
}

實(shí)現(xiàn)中，首先將寬度和高度設(shè)為0，以便只顯示三角形部分。然后，利用border的特性，將左右兩側(cè)的邊框設(shè)置為透明，底部邊框設(shè)置為目標(biāo)顏色，即可形成一個(gè)三角形。

2. transform屬性實(shí)現(xiàn)

.triangle {
width: 0;
height: 0;
border-top: 10px solid #000000;
border-right: 10px solid transparent;
transform: rotate(45deg);
}

實(shí)現(xiàn)中，也先將寬度和高度設(shè)為0，然后將上方邊框設(shè)置為目標(biāo)顏色，右側(cè)邊框設(shè)置為透明。最后利用transform屬性，將元素旋轉(zhuǎn)45度，就能得到一個(gè)三角形了。

3. :before和:after偽元素實(shí)現(xiàn)

.triangle {
position: relative;
width: 0;
height: 0;
}
.triangle:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 10px solid #000000;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.triangle:after {
content: "";
position: absolute;
top: 0;
right: 0;
border-bottom: 10px solid #000000;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}

實(shí)現(xiàn)中，首先需要將元素的位置屬性設(shè)為relative，為后面的偽元素布局提供參考。然后，分別用:before和:after偽元素，分別放置在左右兩個(gè)角上，通過(guò)設(shè)置三個(gè)邊框的樣式，將兩個(gè)偽元素組合起來(lái)，就可以形成一個(gè)三角形了。