css实现箭头

箭头"/>

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%);
}

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