怎么使用div+CSS制作類似微信對話氣泡效果

這篇文章主要介紹怎么使用div+CSS制作類似微信對話氣泡效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

在聊天的場景中，聊天內容需要用到氣泡修飾，如下圖。下面一一講解。

一、圖片式：

第一個樣式是京東客服，氣泡的圓角和鉤子都是用了圖片。使用了一個table組合成了一個圓角的框框。lm樣式拼出了鉤子。

XML/HTML Code復制內容到剪貼板

1. <div class="jimi_lists clearfix">  

2.                 <div class="header_img jimi3 fl"></div>  

3.                 <table class="msg" cellspacing="0" cellpadding="0">  

4.                     <tbody><tr><td class="lt"></td><td class="tt"></td><td class="rt"></td></tr>  

5.                     <tr><td class="lm"><span></span></td><td class="mm"><span class="wel"><span class="visitor"><p>很抱歉，現在人工客服忙，讓小JIMI為您解答吧。</p></span></span></td><td class="rm"></td></tr>  

6.                     <tr><td class="lb"></td><td class="bm"></td><td class="rb"></td></tr><tr><td></td></tr>  

7.                     </tbody>  

8.                 </table>  

9.             </div>  

10.             <div class="customer_lists clearfix">  

11.                 <div class="header_img jimi3" style="background: url(img/mine.jpg) no-repeat center;">  

12.                     <div class="header_img_hover"></div>  

13.                 </div>  

14.                 <table class="msg" cellspacing="0" cellpadding="0"><tbody><tr><td class="lt"></td><td class="tt"></td><td class="rt"></td></tr><tr><td class="lm"></td><td class="mm">你好，我是stoneniqiu</td><td class="rm"><span></span></td></tr><tr><td class="lb"></td><td class="bm"></td><td class="rb"></td></tr><tr><td></td><td class="time"></td><td></td></tr></tbody></table>  

15.             </div>  

樣式：

CSS Code復制內容到剪貼板

1. .jimi_lists {   

2.     margin: 0 -10px 20px 10px;   

3.     position: relative;   

4. }   

5.  .jimi_lists .header_img.jimi3 {   

6.     background: url(../img/jimi_50_3.png) no-repeat 0 0;   

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-repeat 0 0;   

27.     width: 26px;   

28.     height: 10px;   

29. }   

30.  .jimi_lists .tt {   

31.     background: url(../img/msg_bg_tb.png) repeat-x 0 -23px;   

32.     height: 10px;   

33. }   

34. .jimi_lists .rt {   

35.     background: url(../img/msg_bg_lr.png) no-repeat -35px 0;   

36.     width: 10px;   

37.     height: 10px;   

38. }   

39. .jimi_lists .lm {   

40.     background: url(../img/msg_bg_lr.png) repeat-y -94px 0;   

41.     width: 26px;   

42.     vertical-align: top;   

43.     position: relative;   

44. }   

45. .jimi_lists .mm {   

46.     padding: 0 5px;   

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 .lm span {   

54.     background: url(../img/msg_bg_lr.png) no-repeat 0 -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 -113px 0;   

63.     width: 10px;   

64. }   

65. .jimi_lists .lb {   

66.     background: url(../img/msg_bg_lr.png) no-repeat 0 -43px;   

67.     width: 10px;   

68.     height: 10px;   

69. }   

70. .jimi_lists .bm {   

71.     background: url(../img/msg_bg_tb.png) repeat-x 0 -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. }   

79.   

80. .customer_lists {   

81.     position: relative;   

82.     margin: 0 12px 20px 20px;   

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-x 0 0;   

97.     height: 10px;   

98. }   

99. .customer_lists .rt {   

100.     background: url(../img/msg_bg_lr.png) no-repeat -63px 0;   

101.     width: 26px;   

102.     height: 10px;   

103. }   

104. .customer_lists .lm {   

105.     background: url(../img/msg_bg_lr.png) repeat-y -126px 0;   

106.     width: 10px;   

107. }   

108. .customer_lists .mm {   

109.     padding: 1px 8px;   

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 -129px 0;   

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. }   

135.   

136. .customer_lists .rm span {   

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. }   

144.   

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. <div class="jimi_lists clearfix">  

2.                 <div class="header_img jimi3 fl"></div>  

3.                 <div class="bkbubble right">  

4.                      <p>換個氣泡如何</p>  

5.                 </div>  

6.             </div>  

7.             <div class="customer_lists clearfix">  

8.                 <div class="header_img jimi3" style="background: url(img/mine.jpg) no-repeat center;">  

9.                     <div class="header_img_hover"></div>  

10.                 </div>  

11.                 <div class="bkbubble left">  

12.                     <p>這個不錯</p>  

13.                 </div>  

14.             </div>  

（至于畫三角形的方法稍后文章最后會總結一下）
樣式：           

CSS Code復制內容到剪貼板

1. .bkbubble.rightright p:before, .bkbubble.left p: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.rightright p:before {   

12.      left: -12px;   

13.     border-color: transparent #00bfff;   

14.     border-width: 0 12px 12px 0;   

15.  }   

16.  .bkbubble.left p:before {   

17.      rightright: -12px;   

18.     border-color: transparent #00bfff;   

19.     border-width: 0 0 12px 12px ;   

20.  }             

          
三、邊框式：

如果要求邊框顏色和背景顏色不一樣呢？上面的方法就不行了，因為用:before畫三角形是利用border的原理，也就是說，在上面這種方式下，氣泡邊上的小三形是無法呈現兩種顏色的，因為他只有一個border的顏色。那就要想辦法湊出一個有邊框的三角形了。

XML/HTML Code復制內容到剪貼板

1. <div class="jimi_lists lim_operator clearfix">  

2.                 <div class="header_img jimi3 fl"></div>  

3.                 <div class="lim_bubble lim_shadow"><p class="lim_dot">您好，請問有什么可以幫到您？</p></div>  

4.                 <div class="lim_tale"><div class="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: 7px solid transparent;   

8.     border-top-color: #CFCFCF  

9. }   

10.   

11. .expression:after {   

12.     content: '';   

13.     position: absolute;   

14.     left: 16px;   

15.     top: 100%;   

16.     margin-left: -7px;   

17.     margin-top: -1px;   

18.     border: 7px solid transparent;   

19.     border-top-color: #FFF  

20. }  

PS：三角形的簡單繪制：
1.CSS 邊框

這也是一個常用的使用方式，如tooltips信息提示框和下拉菜單。以上的示例，這是一個我最喜歡的方法創建小而且有用的三角形。

優點：

很容易的通過修改一些CSS代碼屬性值而更改顏色和大小
這是一個跨瀏覽器的解決方案。
缺點：

這個方式使用的是border,所以你不能添加陰影、漸變、和其他一些CSS3效果
請記住，IE6是不支持透明邊界的-如果你關心這個問題
2.HTML 字符

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

優點

它是一個跨瀏覽器的技術
您可以使用CSS3的text-shadow屬性添加陰影。
缺點

不能使用太多的CSS3效果，除了使用文字陰影。
在所有的瀏覽器，這是相當不可能實現像素完美。
3.CSS 旋轉正方形

理論上,這種方式，你需要使用兩個內容塊，但是，并沒有限制是使用兩個元素，所以可以使用一個元素加一個偽元素。

創建一個內容里。例如100&times;100像素 &ndash; 這將包含旋轉塊。
旋轉包含的這個塊45度，從而獲得一個菱形
將菱形的塊向頂部便宜，然后設置溢出，設置父層容器截斷
There you go!
優點：

CSS3陰影，漸變等可以更多的使用
缺點：

這個解決方案不是跨瀏覽器的,首先是因為CSS3旋轉。        

以上是“怎么使用div+CSS制作類似微信對話氣泡效果”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！