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

方法一：使用border屬性

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

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

方法二：使用偽元素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);
}

解析：通過對父元素設置定位，創建一個偽元素before，并設置其寬高都為0，給其設置邊框，顏色是四個方向上透明、透明、實色、透明，利用transform屬性將其旋轉45度并向上移動，形成一個三角形。