<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>聊天框</title> <style type="text/css"> .message { position: relative; } .box { margin-left: 30px; display: block; width: auto; max-width: 400px; height: auto; border: 1px solid #ccc; border-radius: 5px; padding: 5px 5px; word-wrap: break-word; float: left; } .box:before { content: ""; position: absolute; width: 0; height: 0; left: 20px; top: 8px; border: 5px solid transparent; border-right-color: #ccc; } .box:after { content: ""; position: absolute; width: 0; height: 0; left: 21px; top: 8px; border: 5px solid transparent; border-right-color: white; } </style> </head> <body> <div class="message"> <div class="box"> asdasasdasasdasasdasasdasasdasasdasasdasasdasasdasasdasasdasasdasasdasasdasasdasasdasasdas </div> </div> </body> </html>
原理为通过border画箭头，其实存在两个箭头，一个为灰色，一个为白色，白色遮住往右偏移1像素，遮住做灰色箭头的一部分留下1px的边框以及遮住信息框的部分边框。
效果如下：
