<!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>
<!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/p/33d992f9904a