CSS三角箭頭可以用于制作彈出框、下拉菜單等效果，下面介紹兩種常用的制作方法。

方法一：使用border屬性

.arrow {
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: red; /* 可自定義顏色 */
}

解析：創(chuàng)建一個(gè)寬度和高度都為0的塊級(jí)元素，給其設(shè)置邊框，只有底部邊框有顏色，其余三個(gè)邊框都透明，形成一個(gè)三角形。

方法二：使用偽元素before和transform屬性

.arrow {
position: relative;
}
.arrow:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 10px solid;
border-color: red transparent transparent transparent; /* 可自定義顏色 */
transform: rotate(45deg);
}

解析：通過對(duì)父元素設(shè)置定位，創(chuàng)建一個(gè)偽元素before，并設(shè)置其寬高都為0，給其設(shè)置邊框，顏色是四個(gè)方向上透明、透明、實(shí)色、透明，利用transform屬性將其旋轉(zhuǎn)45度并向上移動(dòng)，形成一個(gè)三角形。