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

通過調整邊框寬度和顔色，來實作不同大小方向的箭頭，箭頭位置需要調節定位位置和平移位置