实现CSS空心箭头代码实例
分类:实例代码
CSS空心箭头代码实例属于前端实例代码,有关更多实例代码大家可以查看。
使用css可以实现实心箭头,也可以实现空心箭头。
关于实心箭头可以参阅利用border生成三角形箭头效果一章节。
下面就分享一个使用css3实现的空心箭头效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> .arrow { width: 20px; height: 4px; margin: 0 auto 7px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid #343c99; transform: rotate(45deg); transform-origin: left; } .arrow:after { content: ''; display: block; width: 100%; height: 100%; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #343c99; position: absolute; right: -10px; top: -14px; transform: rotate(90deg); transform-origin: bottom; } </style> </head> <body> <div class="arrow"></div> </body> </html>
CSS空心箭头代码实例,这样的场景在实际项目中还是用的比较多的,关于CSS空心箭头代码实例就介绍到这了。