用::before或者::after来生成箭头

1.用::before或者::after来生成箭头

原理

如图所示：我们可以利用::before和::after生成一个正方形框（用边框即可），接着将框旋转45度就是箭头的形状了！

具体代码如下所示：

.icon-share {
    .....             /*这里的点点点代表具体情况，具体属性*/
    position: relative;
}
.icon-back::before{
    content: "";
    width: 12px;
    height: 12px;
    border:  solid #fff;
    border-width: 1px 0 0 1px;
    transform: translate(-50%, -50%) rotate(-45deg);
    position: absolute;
    left: 50%;
    top: 50%;
}

效果如下图所示：

 

 

本博客由博主原创，如需转载需说明出处！谢谢支持！