实现效果
实现代码
CSS Code复制内容到剪贴板 <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <linkrel="shortcuticon"href="resources/img/logo-color.png"alt"><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实现带三角箭头的提示框 ，希望对大家有所帮助，如果大家有任何疑问请给我们留言，小编会及时回复大家的。在此也非常感谢大家对查字典教程网的支持！