<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Arrows</title>
<style>
.right-arrows {
/*转换为块元素*/
display: inline-block;
/*定义4条边均为实线, 且颜色为黑色, 此时看起来是一个黑色小点, 因为没有宽高导致*/
border: solid black;
/*width: 5px;*/
/*height: 5px;*/
/*border有默认宽度, 在这里重置想要的值, 依次为上、右、下、左*/
border-width: 0 3px 3px 0;
/*撑开一些空白区域, 如果不明白可以展开上方的宽高调试, 或者在控制台调试初始化为0, 然后鼠标滚轮增加该值即可看到效果*/
padding: 3px;
/*让直角边旋转90度, 即可得到一个方向箭头, 只要修改这个度数为合适的值即可得到4个方向的箭头*/
transform: rotate(-45deg);*/
}
</style>
</head>
<body>
<div id="container"><i class="right-arrows"></i></div>
</body>
</html>
转载请注明：木叶三忍的博客 » 怎样用css制作网页上下左右方向小箭头
