css画一个小箭头 |css属性前加星号

/* 创建一个div容器 */
.arrow {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 20px solid #999; /* 箭头颜色 */
border-bottom: 10px solid transparent;
}
/* 将div容器变成一个三角形 */
.arrow:before {
position: absolute;
content: "";
left: -20px;
top: -10px;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 20px solid #999;
border-bottom: 10px solid transparent;
transform: rotate(180deg); /* 将三角形转过来 */
}

解释：

首先，大家创建一个div容器，然后设置它的宽度和高度都为0，让它看起来像是一个空心的矩形。

接下来，大家设置三个边框，其中上边框和下边框都是10px，这样就会形成一条直线。右边框的宽度是20px，颜色为#999（灰色），这样就形成了一个向右的三角形。

最后，大家使用:before伪元素创建一个相同的三角形，并将它旋转180度，这样它就可以连接到div容器的左侧，形成一个封闭的箭头。