实现效果
实现代码
CSS Code 复制内容到剪贴板
<!DOCTY PE &nbs p; ht ML > <html> <head> < ;m eta charset= "UTF-8" > <link rel= "shortcut icon" hr ef= "resources/ img / LOG o-color.png" type= "image/x -i con" > <t IT le>测试</title> <style> .out-div { color : # FFFFFF ; font -s ize : 16px ; line-h ei ght : 40px ; dis play : inline - block ; height : 40px ; width : 200px ; text-align : center ; border -radius: 5px ; m arg in-left : 32px ; vert ical -align : top ; background-color : maroon ; } .arrow { width : 0px ; height : 0px ; border -t op : 10px solid transparent ; border-right : 10px solid ; border-bottom : 10px solid transparent ; position : absolute ; mar gin -left : - 10px ; margin-top : 10px ; border-right - color : maroon ; } </style> </head> <body> <div class= "out-div" > <div class= "arrow" ></div> <span>这是一个提示框</span> </div> </body> </html>
以上所述是小编给大家介绍的DIV+CSS实现带三角箭头的提示框 ， 希望对大家有所帮助 ，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
总结
以上是 为你收集整理的 DIV+CSS实现带三角箭头的提示框 全部内容，希望文章能够帮你解决 DIV+CSS实现带三角箭头的提示框 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于DIV+CSS实现带三角箭头的提示框的详细内容...