css用伪元素做箭头图 |css3特效网站

.arrow{
position:relative;
}
.arrow::after{
content:"";
position:absolute;
top:50%;
right:-10px;  /*箭头位置，根据需要调整*/
transform:translateY(-50%);
border-top:10px solid transparent;  /*箭头基本样式*/
border-left:13px solid #ccc;
border-bottom:10px solid transparent;
}

其中，大家在HTML中创建一个包含箭头的父元素，添加一个伪元素来制作箭头图。通过设置content属性为空，border-top、border-left、border-bottom属性来控制箭头的样式和方向，再根据需要通过position属性来定位箭头的位置。

最后，通过position:relative来定位父元素，使用伪元素::after来添加箭头，样式属性使用border来设置。这种方法不仅能够帮助大家节省大量的HTML代码，还可以灵活控制箭头的位置和大小。