CSS带有箭头的对话框效果
分类:实例代码
分享一段代码实例,它实现了带有箭头的矩形对话框效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> .commonProblem-title { color: #32c5d2; font-size: 19px; margin: 10px 20px; } .commonProblem-list { color: #737373; } .commonProblem-close { margin: 5px; } .commonProblem-dialog { position: relative; width: 200px; border: 1px solid #a9a9a9; margin-left: 45px; background-color: #fff; } .commonProblem-dialog:before { position: absolute; content: ""; width: 0; height: 0; left: -59px; top: 28px; border-top: 20px solid transparent; border-right: 59px solid #a9a9a9; } .commonProblem-dialog:after { position: absolute; content: ""; width: 0; height: 0; left: -51px; top: 29px; border-top: 18px solid transparent; border-right: 51px solid #fff; } </style> </head> <body> <div class="commonProblem-dialog"> <div class="pull-left"> <p class="commonProblem-title">前端教程网</p> <ul class="commonProblem-list"> <li>前端教程网一</li> <li>前端教程网二</li> </ul> </div> <div class="pull-right"> </div> <div style="clear: both"></div> </div> </body> </html>
CSS带有箭头的对话框效果,这样的场景在实际项目中还是用的比较多的,关于CSS带有箭头的对话框效果就介绍到这了。
CSS带有箭头的对话框效果属于前端实例代码,有关更多实例代码大家可以查看。