css带有圆角尾巴箭头
分类:实例代码
分享一段代码实例,它实现了箭头效果。
并且箭头的尾部带有小尾巴,这也是比较常见的。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> #ant{ margin: 100px; border-radius: 100px 1px; border-top: 40px solid #f00; border-left: 0px solid #fff; width: 100px; height: 100px; } #ant::after{ content: ''; display: block; width: 0px; height: 0px; border: 50px solid transparent; border-left-color: #f00; margin: -70px 100px; } </style> </head> <body> <div id="ant"></div> </body> </html>
代码相对比较简单,更多内容可以参阅相关阅读。
相关阅读:
(1).border-radius可以参阅CSS3 border-radius一章节。
(2).content可以参阅css content一章节。
css带有圆角尾巴箭头,这样的场景在实际项目中还是用的比较多的,关于css带有圆角尾巴箭头就介绍到这了。
css带有圆角尾巴箭头属于前端实例代码,有关更多实例代码大家可以查看。