利用css实现上下左右箭头的方法
墨初 Web前端 1382阅读
在前端web开发中,CSS样式代码可以做很多的事情。比如画一些简单的图形等等。下面73so博客给大家说一说利用css样式表来画箭头的方法,可以画左箭头,右箭头,上箭头以及下箭头等。
css画箭头的方法
下面是一个完整的利用CSS画箭头的示例,包括左箭头,右箭头等等。
<style> i { border: 1px solid #000; border-width: 0px 1px 1px 0px; display: inline-block; padding: 4px; } .right { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .left { transform: rotate(135deg); -webkit-transform: rotate(135deg); } .up { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); } .down { transform: rotate(45deg); -webkit-transform: rotate(45deg); } </style> <h2>73so.com</h2> <p>右箭头:<i class="right"></i></p> <p>左箭头:<i class="left"></i></p> <p>上箭头:<i class="up"></i></p> <p>下箭头:<i class="down"></i></p>
说明:
1、箭头的是利用DIV边框来显现的
2、不同方向的箭头可以使用CSS样式代码中的 transform 属性来旋转
3、以上代码可以保存到本地运行即可。