大量学习视频共享,QQ:2235695530 微信号:wikitest

怎样用css制作网页上下左右方向小箭头

前端开发 konohanaruto 415℃ 0评论

<!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制作网页上下左右方向小箭头

喜欢 (1)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址