DIV+CSS实现带三角箭头的提示框
|
实现代码
CSS Code复制内容到剪贴板
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="shortcut icon" 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: 10px solid transparent; border-right: 10px solid; border-bottom: 10px solid transparent; position: absolute; margin-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实现带三角箭头的提示框 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！ （编辑：威海站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
