之前做过直播室的聊天记录，要求就是和微信的聊天记录一样的显示效果，下面是效果图：
我们只需要先画一个div，为其加上边框，然后在边框的左边或者右边加上两个相同大小的三角形，一个三角形与div有相同颜色的边框，另一个三角形边框色为白色，用于覆盖前一个三角形的一部分，这样看起来便是一个整体了，上一篇已经讲过css绘制实心三角形，这里直接附上代码：
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title></title><style>.wrap{position: relative;width: 300px;height: 80px;margin: 50px auto;box-shadow: 0px 2px 7px 0px rgba(123, 123, 123, 0.17);border: solid 1px #e5e5e5;border-radius: 4px;}.wrap:before, .wrap:after{content: "";position: absolute;top: 34px;border-top: 6px solid transparent;border-bottom: 6px solid transparent;}.wrap:before{left: -10px;border-right: 10px solid #e5e5e5;}.wrap:after{/*划重点，这里需要离div更近才能盖住上一个三角形*/left: -8px;border-right: 10px solid #fff;}</style></head><body><div class="wrap"></div></body></html>
原文作者技术博客：/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。
