css制作上下左右箭头

我们切页面经常会碰到箭头的图标，今天就分享下如何用css制作上下左右箭头。二当家的的首页菜单切换按钮的箭头，正是用的这种方法，兼容IE6+及其他浏览器。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线充值

分类：html/css > 图形难易：初级

查看演示

加我微信，拉你进VIP群学习：

下载资源下载积分： 30 积分

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;}

若是你想设置在线箭头的边框颜色，可查看素材火工具箱css在线生成三角形

css制作上下左右箭头 收藏

HTML

上下左右箭头CSS样式

css制作上下左右箭头
收藏