用css实现一个椭圆形状的背景框很好实现
css: div{ width:200px; height:80px; background-color: #78DDF8; border-radius:10px; } html: <div></div>
重点在于边上的小三角，这里用到css的伪类 ：before （：after/:first-letter/:first-line都是）
div::before{
content:‘‘;
display:‘block‘;
border:20px solid red;
left:-20px;
top:5px;
position:absolute;
z-index:-1;
border-radius:5px;
border-color:#78DDF8 transparent transparent transparent;
}
这样qq的气泡指向的背景框就实现了（可复制粘帖查看，这里就不配图了）
div::before{ content:‘‘; display:‘block‘; border:14px solid red; left:-28px; top:26px; position:absolute; z-index:-1; border-color:transparent #78DDF8 transparent transparent ; }
这是微信对方信息背景框。（如果实现本人的信息框，将before改成after，并修改boder-color颜色位置和定位即可实现）