CSS实现聊天气泡效果

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