<!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>