Bootstrap

用::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%;
}

效果如下图所示:

 

 

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

;