运行结果：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="/" /><title>纯CSS实现气泡聊天框的方法</title> <style type="text/css"> .message-box { position:relative; width:200px; height:40px; line-height:40px; border:1px solid #000; text-align:center; color:#fff; border-radius:2px;background-color:green;} .triangle-border { position:absolute; overflow:hidden; width:0; height:0; border-width:8px 0 8px 8px ; border-style:dashed dashed dashed solid;top:13px; } .tb-border { right:-8px;border-color:transparent transparent transparent #000; } .tb-background { right:-7px;border-color:transparent transparent transparent green; }</style> </head> <body> <div class="message-box"><span>气泡聊天框实现</span> <div class="triangle-border tb-border"></div> <div class="triangle-border tb-background"></div> </div> </body> </html>
