在開(kāi)發(fā)中，三角箭頭是很常見(jiàn)的icon，很多時(shí)候不需要UI提供切圖我們可以自己用幾行代碼寫(xiě)出來(lái)，利用div的邊框旋轉(zhuǎn)或者使用偽元素的邊框旋轉(zhuǎn)，以下通過(guò)幾種不同的方法繪制。
1.空心線條箭頭
效果圖
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
/**上箭頭：利用div的邊框旋轉(zhuǎn)*/
.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偽類(lèi):after旋轉(zhuǎn)*/
.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)等同于矩陣轉(zhuǎn)換matrix(0.71, 0.71, 0.71, -0.71, 0, 0)*/
/*transform: matrix(0.71, 0.71, 0.71, -0.71, 0, 0);*/
}
/*下箭頭：利用css偽類(lèi):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偽類(lèi):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.實(shí)心箭頭
效果圖
<!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>
原文作者技術(shù)博客：http://www.itdecent.cn/u/ac4daaeecdfe
95后前端妹子一枚，愛(ài)閱讀，愛(ài)交友，將工作中遇到的問(wèn)題記錄在這里，希望給每一個(gè)看到的你能帶來(lái)一點(diǎn)幫助。
歡迎留言交流。
