css三角箭头描边

在CSS中，我们经常需要创建一些三角箭头来装饰网页，但是有时我们不仅需要一个块级元素，而且需要在箭头周围描边。这时候，CSS三角箭头描边就派上用场了。
首先，我们需要创建一个带箭头的块级元素，这可以使用CSS伪类中的:before或:after来实现。以下是一个简单的例子：

.arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right: 10px solid black;
    position: relative;
}
<br>
.arrow:before {
    content: "";
    position: absolute;
    top: -20px;
    left: -10px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right: 10px solid black;
    transform: rotate(-45deg);
} 

这个箭头有一个黑色的右侧描边和一个向左下方旋转45度的右上方描边。现在我们需要在箭头周围描边：

.arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right: 10px solid black;
    position: relative;
    box-shadow: 0 0 0 2px gray;
}
<br>
.arrow:before {
    content: "";
    position: absolute;
    top: -20px;
    left: -10px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right: 10px solid black;
    transform: rotate(-45deg);
    box-shadow: 0 0 0 2px gray;
} 

现在，我们添加了一个box-shadow属性，它将在箭头周围创建一个2像素的灰色描边。
这是一个简单的例子，但它可以应用于任何形状的CSS三角。只需要使用:before或:after伪类创建一个具有所需形状的箭头，并用box-shadow将其描边。