css实现箭头

边框箭头

.arrow1{
    position: relative;
}
.arrow1::after{
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    height: 12px;
    width: 12px;
    transform-origin: 25% 25%;
    border-width: 2px 0 0 2px;
    border-color: #999;
    border-style: solid;
    transform: translate(-25%, -25%) rotate(45deg);
}
           

通过调整宽高，以及旋转角度来实现不同大小方向的箭头，箭头位置需要调节定位位置（旋转中心以及平移位置尽量少修改）

实体箭头

.arrow2{
    position: relative;
}
.arrow2::after{
    content: '';
    height: 0;
    width: 0;
    border-width: 6px;
    border-color: #999 transparent transparent;
    border-style: solid;
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -25%);
}
           

通过调整边框宽度和颜色，来实现不同大小方向的箭头，箭头位置需要调节定位位置和平移位置