弯转箭头实现

弯转箭头实现方式
1：用html设置为等腰直角三角形
2：给元素添加伪类选择器；
2.1设置上边框宽度；设置容器宽度和高度，最后通过圆角弧度；使线变弯曲
————> 为了让边框有长度 所以设置 宽度
————> 为了让边框有弧度 所以设置 高度
2.2通过位置移动 position 再旋转transform 将 曲线与三角形结合

#示例代码

   .icon{


  display: inline-block;
    
}

.icon-curvedarrow{

    position: relative;
    
    width: 0;
    
    height: 0;
    
    border-right: 9px solid black;
    
    border-top: 9px solid transparent;
    
    /* 弯曲箭头：指向 */
    
    transform: rotate(180deg);
    
}

/* 为了让一个元素为特殊符号：用伪元素选择器实现 */

.icon-curvedarrow::after{

    content: "";
    
    border-top: 3px solid black;
    
    width: 12px;
    
    height: 12px;
    
    position: absolute;
    
    top: -12px;
    
    left: -9px;
    
    border-radius: 20px 0 0 0;
    
    transform: rotate(45deg);
    
}