今天小编跟大家讲解下有关DIV+CSS实现带三角箭头的提示框 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关DIV+CSS实现带三角箭头的提示框 的相关资料，希望小伙伴们看了有所帮助。
实现效果
实现代码
CSS Code复制内容到剪贴板 <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <linkrel="shortcuticon"href="resources/img/logo-color.png"type="image/x-icon"> <title>测试</title> <style> .out-div{ color:#FFFFFF; font-size:16px; line-height:40px; display:inline-block; height:40px; width:200px; text-align:center; border-radius:5px; margin-left:32px; vertical-align:top; background-color:maroon; } .arrow{ width:0px; height:0px; border-top:10pxsolidtransparent; border-right:10pxsolid; border-bottom:10pxsolidtransparent; position:absolute; margin-left:-10px; margin-top:10px; border-right-color:maroon; } </style> </head> <body> <divclass="out-div"> <divclass="arrow"></div> <span>这是一个提示框</span> </div> </body> </html>以上所述是小编给大家介绍的DIV+CSS实现带三角箭头的提示框 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对爱蒂网站的支持！
来源：爱蒂网
