css线条由左到右增加,开发中实用CSS干货总结（一）CSS实现上、下、左、右三角箭头...

在开发中，三角箭头是很常见的icon，很多时候不需要UI提供切图我们可以自己用几行代码写出来，利用div的边框旋转或者使用伪元素的边框旋转，以下通过几种不同的方法绘制。

1.空心线条箭头

效果图

*{

margin: 0;

padding: 0;

}

/**上箭头：利用div的边框旋转*/

.arrow-top{

margin-top: 32px;

margin-left: 20px;

width: 10px;

height: 10px;

border-top: 1px solid #757575;

border-right: 1px solid #757575;

transform: rotate(-45deg);

-o-transform: rotate(-45deg);

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

}

/*右箭头：利用css伪类:after旋转*/

.arrow-right:after {

content: "";

position: absolute;

top: 10px;

left: 50px;

margin: 20px;

border-right: 1px solid #757575;

border-bottom: 1px solid #757575;

width: 10px; height: 10px;

transform: rotate(-45deg);

-o-transform: rotate(-45deg);

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

/*rotate(-45deg)等同于矩阵转换matrix(0.71, 0.71, 0.71, -0.71, 0, 0)*/

/*transform: matrix(0.71, 0.71, 0.71, -0.71, 0, 0);*/

}

/*下箭头：利用css伪类:after与矩阵*/

.arrow-bottom:after {

content: "";

position: absolute;

top: 6px;

left: 100px;

margin: 20px;

border-right: 1px solid #757575;

border-bottom: 1px solid #757575;

width: 10px;

height: 10px;

transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);

}

/*左箭头：利用css伪类:after与矩阵*/

.arrow-left:after {

content: "";

position: absolute;

top: 10px;

left: 150px;

margin: 20px;

border-right: 1px solid #757575;

border-bottom: 1px solid #757575;

width: 10px;

height: 10px;

transform: matrix(-0.71,-0.71, -0.71, 0.71, 0, 0)

}

2.实心箭头

效果图

.arrow {

position: relative;

margin:100px auto;

width:300px;

height: 150px;

display: -webkit-box;

display: -ms-flexbox;

display: -webkit-flex;

display: flex;

}

.arrow li{

position: absolute;

width: 0;

height: 0;

border: 10px solid #333;

list-style: none;

}

/*上箭头*/

.arrow li.top{

top: 20px;

left: 10px;

border-top-color: transparent;

border-left-color: transparent;

border-right-color: transparent;

}

/*右箭头*/

.arrow li.right{

top: 20px;

left: 60px;

border-top-color: transparent;

border-bottom-color: transparent;

border-right-color: transparent;

}

/*下箭头*/

.arrow li.bottom{

top: 26px;

left: 110px;

border-bottom-color: transparent;

border-left-color: transparent;

border-right-color: transparent;

}

/*左箭头*/

.arrow li.left{

top: 20px;

left: 160px;

border-top-color: transparent;

border-bottom-color: transparent;

border-left-color: transparent;

}

原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe

95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。

欢迎留言交流。