H5聊天对话气泡的一种实现方式及原理 实现效果 实现原理 实现代码 聊天对话气泡实现特别需要处理的是气泡的小尖角。 实现效果 实现原理 基于HTML元素边框原理及CSS伪元素实现气泡小尖角。关键点如下: 元素边框实际是由梯形组成。 当元素宽高为0、边框不断加粗时,实际边框是成三角形。 保留元素的其中一个边框,透明化另外3个边框。 通过元素的层级关系用两个三角形遮盖形成带边框的小三角。 这里使用CSS伪元素实现两个小三角。 实现代码 <html> <head> <meta charset='UTF-8'/> <style> .msg_left