css实现微信信息背景qq聊天气泡 - 沉睡的码农

时间:2024-02-18 14:20:54

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