css实现微信信息背景qq聊天气泡

时间：2016-08-04 13:31:08 收藏：0 阅读：836

用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颜色位置和定位即可实现）