css制作上下左右箭头

来源:https://www.sucaihuo.com/js/405.html 2015-08-20 22:19浏览(3118) 收藏

我们切页面经常会碰到箭头的图标,今天就分享下如何用css制作上下左右箭头。素材火的首页菜单切换按钮的箭头,正是用的这种方法,兼容IE6+及其他浏览器。
css制作上下左右箭头
分类:html/css > 图形 难易:初级
查看演示 下载资源 下载积分: 20 积分

HTML

<div style="position: relative">
    <span class="arrow arrow-down"></span>
    <span class="arrow arrow-up"></span>
    <span class="arrow arrow-left"></span>
    <span class="arrow arrow-right"></span>
</div>

上下左右箭头CSS样式

.arrow{width:0; height:0; position: absolute; top:0; left:0; display: inline-block;} .arrow-down{border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid #ccc;} .arrow-up{border-bottom:5px solid #ccc; border-left:5px solid transparent; border-right:5px solid transparent; top:50px;} .arrow-left{border-top:5px solid transparent; border-bottom:5px solid transparent; border-right:5px solid #ccc; top:100px;} .arrow-right{border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:5px solid #ccc; top:150px;}

若是你想设置在线箭头的边框颜色,可查看素材火工具箱<a href='http://www.sucaihuo.com/tools/triangle' target='_blank'>css在线生成三角形</a>

评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2