这篇文章主要介绍了用css3写箭头的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
用css3写箭头的方法:首先创建一个前端示例文件;然后利用CSS3中的transform属性实现一个没有背景填充小正方形;最后通过设置它的边框和翻转即可实现箭头效果。
箭头用css3怎么写?
可以利用CSS3中的transform属性,先实现一个没有背景填充小正方形,设置它的边框、翻转就可以实现箭头了。
下面通过示例来看看:
<style> .left{ width: 7px; height: 7px; border-top: 2px solid #ff0000; border-right: 2px solid #ff0000; transform: rotate(-135deg); } .right{ width: 7px; height: 7px; border-top: 2px solid #ff0000; border-right: 2px solid #ff0000; transform: rotate(45deg); } .top{ width: 7px; height: 7px; border-top: 2px solid #ff0000; border-right: 2px solid #ff0000; transform: rotate(-45deg); } .bottom{ width: 7px; height: 7px; border-top: 2px solid #ff0000; border-right: 2px solid #ff0000; transform: rotate(135deg); } </style> </head> <body> <div class="left"></div> <hr> <div class="right"></div> <hr> <div class="top"></div> <hr> <div class="bottom"></div> </body>
效果图:
感谢你能够认真阅读完这篇文章,希望小编分享的“用css3写箭头的方法”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。