div+CSS制作类似微信对话气泡效果的实例总结

2020-05-07 06:37:04易采站长站整理

                    <div class="header_img_hover"></div>  
                </div>  
                <div class="bkbubble left">  
                    <p>这个不错</p>  
                </div>  
            </div>  

(至于画三角形的方法稍后文章最后会总结一下)
样式:           

CSS Code复制内容到剪贴板

.bkbubble.rightright p:before, .bkbubble.left p:before {   
      width: 0;   
    position: absolute;   
    top: 12px;   
    border-style: solid;   
    content: "";   
  }   
  .bkbubble.left {   
      text-align: rightright;   
  }   
 .bkbubble.rightright p:before {   
     left: -12px;   
    border-color: transparent #00bfff;   
    border-width: 0 12px 12px 0;   
 }   
 .bkbubble.left p:before {   
     rightright: -12px;   
    border-color: transparent #00bfff;   
    border-width: 0 0 12px 12px ;   
 }             

          
三、边框式:

如果要求边框颜色和背景颜色不一样呢?上面的方法就不行了,因为用:before画三角形是利用border的原理,也就是说,在上面这种方式下,气泡边上的小三形是无法呈现两种颜色的,因为他只有一个border的颜色。那就要想办法凑出一个有边框的三角形了。

XML/HTML Code复制内容到剪贴板

<div class="jimi_lists lim_operator clearfix">  
                <div class="header_img jimi3 fl"></div>