实现效果
实现代码
<!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>