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