CSS实现聊天气泡效果

一、效果图 京东效果 模拟的效果 二、原理 准备一个高度和宽度为0的盒子 将这个盒子设置一个边框 将边框不需要的地方用 transparent 来代替,需要显示的地方设置对应的颜色 如果需要改变其大小,直接设置边框的宽度 border-width 将字体 font-size 和行高 line-height 设置为0,以免影响显示 最后使用定位将其设置到需要的位置 三、代码 HTML结构 CSS样式 .square { position: relative;