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

互联网
在岁月中跋涉，每个人都有自己的故事，看淡心境才会秀丽，看开心情才会明媚。累时歇一歇，随清风漫舞，烦时静一静，与花草凝眸，急时缓一缓，和自己微笑。

在聊天的场景中，聊天内容需要用到气泡修饰，如下图。下面一一讲解。

一、图片式：

第一个样式是京东客服，气泡的圆角和钩子都是用了图片。使用了一个table组合成了一个圆角的框框。lm样式拼出了钩子。

XML/HTML Code复制内容到剪贴板
  1. <divclass="jimi_listsclearfix">
  2. <divclass="header_imgjimi3fl"></div>
  3. <tableclass="msg"cellspacing="0"cellpadding="0">
  4. <tbody><tr><tdclass="lt"></td><tdclass="tt"></td><tdclass="rt"></td></tr>
  5. <tr><tdclass="lm"><span></span></td><tdclass="mm"><spanclass="wel"><spanclass="visitor"><p>很抱歉，现在人工客服忙，让小JIMI为您解答吧。</p></span></span></td><tdclass="rm"></td></tr>
  6. <tr><tdclass="lb"></td><tdclass="bm"></td><tdclass="rb"></td></tr><tr><td></td></tr>
  7. </tbody>
  8. </table>
  9. </div>
  10. <divclass="customer_listsclearfix">
  11. <divclass="header_imgjimi3"style="background:url(img/mine.jpg)no-repeatcenter;">
  12. <divclass="header_img_hover"></div>
  13. </div>
  14. <tableclass="msg"cellspacing="0"cellpadding="0"><tbody><tr><tdclass="lt"></td><tdclass="tt"></td><tdclass="rt"></td></tr><tr><tdclass="lm"></td><tdclass="mm">你好，我是stoneniqiu</td><tdclass="rm"><span></span></td></tr><tr><tdclass="lb"></td><tdclass="bm"></td><tdclass="rb"></td></tr><tr><td></td><tdclass="time"></td><td></td></tr></tbody></table>
  15. </div>

样式：

CSS Code复制内容到剪贴板
  1. .jimi_lists{
  2. margin:0-10px20px10px;
  3. position:relative;
  4. }
  5. .jimi_lists.header_img.jimi3{
  6. background:url(../img/jimi_50_3.png)no-repeat00;
  7. }
  8. .jimi_lists.header_img{
  9. width:50px;
  10. height:50px;
  11. position:absolute;
  12. top:0;
  13. left:0;
  14. }
  15. .fl{
  16. float:left;
  17. }
  18. .jimi_lists.msg{
  19. margin-left:59px;
  20. margin-right:40px;
  21. margin-top:2px;
  22. float:left;
  23. display:inline;
  24. }
  25. .jimi_lists.lt{
  26. background:url(../img/msg_bg_lr.png)no-repeat00;
  27. width:26px;
  28. height:10px;
  29. }
  30. .jimi_lists.tt{
  31. background:url(../img/msg_bg_tb.png)repeat-x0-23px;
  32. height:10px;
  33. }
  34. .jimi_lists.rt{
  35. background:url(../img/msg_bg_lr.png)no-repeat-35px0;
  36. width:10px;
  37. height:10px;
  38. }
  39. .jimi_lists.lm{
  40. background:url(../img/msg_bg_lr.png)repeat-y-94px0;
  41. width:26px;
  42. vertical-align:top;
  43. position:relative;
  44. }
  45. .jimi_lists.mm{
  46. padding:05px;
  47. background-color:#FFF;
  48. word-break:break-all;
  49. word-wrap:break-word;
  50. color:#333;
  51. line-height:20px;
  52. }
  53. .jimi_lists.lmspan{
  54. background:url(../img/msg_bg_lr.png)no-repeat0-14px;
  55. display:inline-block;
  56. width:26px;
  57. height:16px;
  58. position:absolute;
  59. top:5px;
  60. }
  61. .jimi_lists.rm{
  62. background:url(../img/msg_bg_lr.png)repeat-y-113px0;
  63. width:10px;
  64. }
  65. .jimi_lists.lb{
  66. background:url(../img/msg_bg_lr.png)no-repeat0-43px;
  67. width:10px;
  68. height:10px;
  69. }
  70. .jimi_lists.bm{
  71. background:url(../img/msg_bg_tb.png)repeat-x0-25px;
  72. height:10px;
  73. }
  74. .jimi_lists.rb{
  75. background:url(../img/msg_bg_lr.png)no-repeat-35px-43px;
  76. width:10px;
  77. height:10px;
  78. }
  80. .customer_lists{
  81. position:relative;
  82. margin:012px20px20px;
  83. }
  84. .customer_lists.msg{
  85. float:rightright;
  86. margin-right:73px;
  87. _margin-rightright:38px;
  88. margin-top:2px;
  89. }
  90. .customer_lists.lt{
  91. background:url(../img/msg_bg_lr.png)no-repeat-47px-0;
  92. width:10px;
  93. height:10px;
  94. }
  95. .customer_lists.tt{
  96. background:url(../img/msg_bg_tb.png)repeat-x00;
  97. height:10px;
  98. }
  99. .customer_lists.rt{
  100. background:url(../img/msg_bg_lr.png)no-repeat-63px0;
  101. width:26px;
  102. height:10px;
  103. }
  104. .customer_lists.lm{
  105. background:url(../img/msg_bg_lr.png)repeat-y-126px0;
  106. width:10px;
  107. }
  108. .customer_lists.mm{
  109. padding:1px8px;
  110. background-color:#3897E7;
  111. word-break:break-all;
  112. word-wrap:break-word;
  113. color:#FFF;
  114. }
  115. .customer_lists.rm{
  116. background:url(../img/msg_bg_lr.png)repeat-y-129px0;
  117. width:26px;
  118. vertical-align:top;
  119. position:relative;
  120. }
  121. .customer_lists.lb{
  122. background:url(../img/msg_bg_lr.png)no-repeat-47px-36px;
  123. width:10px;
  124. height:10px;
  125. }
  126. .customer_lists.bm{
  127. background:url(../img/msg_bg_tb.png)repeat-x-106px-4px;
  128. height:10px;
  129. }
  130. .customer_lists.rb{
  131. background:url(../img/msg_bg_lr.png)no-repeat-63px-36px;
  132. width:26px;
  133. height:10px;
  134. }
  136. .customer_lists.rmspan{
  137. background:url(../img/msg_bg_lr.png)no-repeat-63px-14px;
  138. display:inline-block;
  139. width:26px;
  140. height:16px;
  141. position:absolute;
  142. top:5px;
  143. }
  145. .customer_lists.header_img_hover{
  146. position:absolute;
  147. background:url(../img/avatar_mask_01.png);
  148. top:0;
  149. width:50px;
  150. height:50px;
  151. }
  152. .customer_lists.header_img{
  153. position:absolute;
  154. top:0;
  155. rightright:14px;
  156. width:50px;
  157. height:50px;
  158. }
  159. .clearfix:after{
  160. content:".";
  161. display:block;
  162. clear:both;
  163. visibility:hidden;
  164. height:0;
  165. }

二、背景式：

第二种主要是使用了：before伪类画出了三角形，然后用定位拼在了一起。

XML/HTML Code复制内容到剪贴板
  1. <divclass="jimi_listsclearfix">
  2. <divclass="header_imgjimi3fl"></div>
  3. <divclass="bkbubbleright">
  4. <p>换个气泡如何</p>
  5. </div>
  6. </div>
  7. <divclass="customer_listsclearfix">
  8. <divclass="header_imgjimi3"style="background:url(img/mine.jpg)no-repeatcenter;">
  9. <divclass="header_img_hover"></div>
  10. </div>
  11. <divclass="bkbubbleleft">
  12. <p>这个不错</p>
  13. </div>
  14. </div>

（至于画三角形的方法稍后文章最后会总结一下）
样式：

CSS Code复制内容到剪贴板
  1. .bkbubble.rightrightp:before,.bkbubble.leftp:before{
  2. width:0;
  3. position:absolute;
  4. top:12px;
  5. border-style:solid;
  6. content:"";
  7. }
  8. .bkbubble.left{
  9. text-align:rightright;
  10. }
  11. .bkbubble.rightrightp:before{
  12. left:-12px;
  13. border-color:transparent#00bfff;
  14. border-width:012px12px0;
  15. }
  16. .bkbubble.leftp:before{
  17. rightright:-12px;
  18. border-color:transparent#00bfff;
  19. border-width:0012px12px;
  20. }


三、边框式：

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

XML/HTML Code复制内容到剪贴板
  1. <divclass="jimi_listslim_operatorclearfix">
  2. <divclass="header_imgjimi3fl"></div>
  3. <divclass="lim_bubblelim_shadow"><pclass="lim_dot">您好，请问有什么可以帮到您？</p></div>
  4. <divclass="lim_tale"><divclass="radiusborder"></div></div>
  5. </div>

1.先画一个小矩形。

CSS Code复制内容到剪贴板
  1. .lim_operator.lim_tale{
  2. left:-1px;
  3. background-color:#c8f064;
  4. border-color:#a5d01b;
  5. margin-left:70px;
  6. }
  7. .lim_tale{
  8. position:absolute;
  9. width:12px;
  10. height:8px;
  11. overflow:hidden!important;
  12. top:10px;
  13. z-index:2;
  14. border-top-style:solid;
  15. border-top-width:1px;
  16. }

2.画出斜线。

css里面是没有斜线的，这里是用了一个园的弧形拼出来的。在一个大圆上，截取一段弧，就是一条斜线了。

CSS Code复制内容到剪贴板
  1. .lim_operator.radiusborder{
  2. position:absolute;
  3. background-color:#EFF0F2;
  4. top:-29px;
  5. left:-94px;
  6. height:160px;
  7. width:160px;
  8. border-top-style:solid;
  9. border-top-width:1px;
  10. border-right-style:solid;
  11. border-right-width:1px;
  12. border-top-rightright-radius:154px;
  13. border-color:#a5d01b;
  14. }

四、叠加式：

原理就是相当于用before先画出一个有色背景，再用after画出一个白色背景，然后叠加错开顶部1-2px，这样就出现了一个有边框有背景的三角形。web 微信就是这种做法

CSS Code复制内容到剪贴板
  1. .expression:before{
  2. content:'';
  3. position:absolute;
  4. left:16px;
  5. top:100%;
  6. margin-left:-7px;
  7. border:7pxsolidtransparent;
  8. border-top-color:#CFCFCF
  9. }
  11. .expression:after{
  12. content:'';
  13. position:absolute;
  14. left:16px;
  15. top:100%;
  16. margin-left:-7px;
  17. margin-top:-1px;
  18. border:7pxsolidtransparent;
  19. border-top-color:#FFF
  20. }

PS：三角形的简单绘制：
1.CSS 边框

这也是一个常用的使用方式，如tooltips信息提示框和下拉菜单。以上的示例，这是一个我最喜欢的方法创建小而且有用的三角形。

优点：

很容易的通过修改一些CSS代码属性值而更改颜色和大小
这是一个跨浏览器的解决方案。
缺点：

这个方式使用的是border,所以你不能添加阴影、渐变、和其他一些CSS3效果
请记住，IE6是不支持透明边界的-如果你关心这个问题
2.HTML 字符

它是基于使用可用的Unicode字符列表的字符。

优点

它是一个跨浏览器的技术
您可以使用CSS3的text-shadow属性添加阴影。
缺点

不能使用太多的CSS3效果，除了使用文字阴影。
在所有的浏览器，这是相当不可能实现像素完美。
3.CSS 旋转正方形

理论上,这种方式，你需要使用两个内容块，但是，并没有限制是使用两个元素，所以可以使用一个元素加一个伪元素。

创建一个内容里。例如100×100像素 – 这将包含旋转块。
旋转包含的这个块45度，从而获得一个菱形
将菱形的块向顶部便宜，然后设置溢出，设置父层容器截断
There you go!
优点：

CSS3阴影，渐变等可以更多的使用
缺点：

这个解决方案不是跨浏览器的,首先是因为CSS3旋转。

以上就是div+CSS制作类似微信对话气泡效果的实例总结。人只要不失去方向，就不会失去自己。更多关于div+CSS制作类似微信对话气泡效果的实例总结请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
CSS让子元素div的高度填满父容器的剩余空间的方法
DIV或者DIV里面的图片水平与垂直居中的方法
详解CSS3原生支持div铺满浏览器的方法
div+css样式自制带小三角的tooltips效果
DIV 自动滚动功能及滚动条颜色修改的代码