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