CSS小三角是一種常用的圖形元素，可以用來(lái)實(shí)現(xiàn)導(dǎo)航欄、下拉菜單等頁(yè)面布局中的箭頭指示功能。在這篇文章中，介紹一種帶邊框的CSS小三角的實(shí)現(xiàn)方法。我們可以通過(guò)CSS中的偽元素:before/:after來(lái)實(shí)現(xiàn)。

/*首先我們需要定義一個(gè)偽元素:before，將其位置設(shè)置在定位元素的最左側(cè)*/
.box:before{
content: "";
position: absolute;
left: -10px;
top: 50%; /*將其位置垂直居中*/
margin-top: -5px; /*撐開高度*/
border-style: solid;
border-width: 5px 10px 5px 0; /*通過(guò)border-width設(shè)置寬度*/
border-color: transparent #000000 transparent transparent; /*通過(guò)border-color設(shè)置顏色*/
}
/*接下來(lái)，我們可以通過(guò)旋轉(zhuǎn)偽元素及背景色來(lái)實(shí)現(xiàn)邊框*/
.box:after{
content: "";
position: absolute;
left: -10px;
top: 50%;
margin-top: -5px;
border-style: solid;
border-width: 5px 10px 5px 0;
transform: rotate(180deg); /*旋轉(zhuǎn)180度*/
border-color: transparent #ffffff transparent transparent; /*白色邊框*/
z-index: -1; /*使其在偽元素前方*/
}

通過(guò)將偽元素的背景色與容器元素的背景色一致，我們可以達(dá)到邊框的效果。同樣地，我們也可以在偽元素的:before/:after中使用透明背景色，通過(guò)box-shadow來(lái)實(shí)現(xiàn)方向與顏色的控制。這種方法與使用border實(shí)現(xiàn)的方法相比，需要設(shè)置陰影的大小、顏色等屬性來(lái)達(dá)到最終效果。具體實(shí)現(xiàn)方式可以參考下面的代碼。

/*使用box-shadow來(lái)實(shí)現(xiàn)*/
.box:before{
content: "";
position: absolute;
left: -10px;
top: 50%;
margin-top: -5px;
height: 0;
width: 0;
border-style: solid;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #000000;
box-shadow: -1px 0px 1px rgba(0,0,0,0.2); /*陰影實(shí)現(xiàn)邊框*/
}
.box:after{
content: "";
position: absolute;
left: -20px;
top: 50%;
margin-top: -5px;
height: 0;
width: 0;
border-style: solid;
transform: rotate(180deg);
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent #ffffff;
box-shadow: -1px 0px 1px rgba(0,0,0,0.2);
}

總的來(lái)說(shuō)，帶邊框的CSS小三角可以通過(guò)使用border或box-shadow等屬性來(lái)實(shí)現(xiàn)。選擇何種方法，需要按照實(shí)際需求進(jìn)行選擇。在進(jìn)行使用時(shí)，還需注意選擇背景色或透明背景色與陰影大小、顏色等屬性的匹配。這樣才能實(shí)現(xiàn)理想中的效果。