开发中实用CSS干货总结（一）CSS实现上、下、左、右三角箭头
2018-12-20 本文已影响1人
菜菜___
在开发中，三角箭头是很常见的icon，很多时候不需要UI提供切图我们可以自己用几行代码写出来，利用div的边框旋转或者使用伪元素的边框旋转，以下通过几种不同的方法绘制。
1.空心线条箭头
效果图
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
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)
}
</style>
</head>
<body>
<div class="arrow-top"></div>
<div class="arrow-right"></div>
<div class="arrow-bottom"></div>
<div class="arrow-left"></div>
</body>
</html>
2.实心箭头
效果图
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<ul class="arrow">
<li class="top"></li>
<li class="right"></li>
<li class="bottom"></li>
<li class="left"></li>
</ul>
</body>
</html>
原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。
