我们切页面经常会碰到箭头的图标，今天就分享下如何用css制作上下左右箭头。素材圈的首页菜单切换按钮的箭头，正是用的这种方法，兼容IE6+及其他浏览器。
淘建站为您提供更多_html/css_图形_arrow_箭头，在此特别感谢您对我们的支持与厚爱！
查看演示
演示不了，点击反馈
加入收藏
下载 500 次
打赏作者
觉得不错，可打赏下作者
下载资源
免费共享
特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。
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在线生成三角形
