在聊天的場景中，聊天內容需要用到氣泡修飾，如下圖。下面一一講解。
一、式：
第乙個樣式是京東客服，氣泡的圓角和鉤子都是用了。使用了乙個table組合成了乙個圓角的框框。lm樣式拼出了鉤子。
xml/html code複製內容到剪貼簿
樣式：css code複製內容到剪貼簿
二、背景式：
第二種主要是使用了：before偽類畫出了三角形，然後用定位拼在了一起。
xml/html code複製內容到剪貼簿
（至於畫三角形的方法稍後文章最後會總結一下）
樣式：
css code複製內容到剪貼簿
三、邊框式：
如果要求邊框顏色和背景顏色不一樣呢？上面的方法就不行了，因為用:before畫三角形是利用border的原理，也就是說，在上面這種方式下，氣泡邊上的小三形是無法呈現兩種顏色的，因為他只有乙個border的顏色。那就要想辦法湊出乙個有邊框的三角形了。
xml/html code複製內容到剪貼簿
1.先畫乙個小矩形。
css code複製內容到剪貼簿
2.畫出斜線。
css裡面是沒有斜線的，這裡是用了乙個園的弧形拼出來的。在乙個大圓上，擷取一段弧，就是一條斜線了。
css code複製內容到剪貼簿
四、疊加式：
原理就是相當於用before先畫出乙個有色背景，再用after畫出乙個白色背景，然後疊加錯開頂部1-2px，這樣就出現了乙個有邊框有背景的三角形。web 微信就是這種做法
css code複製內容到剪貼簿
ps：三角形的簡單繪製：
1.css 邊框
這也是乙個常用的使用方式，如tooltips資訊提示框和下拉列表。以上的示例，這是乙個我最喜歡的方法建立小而且有用的三角形。
優點：很容易的通過修改一些css**屬性值而更改顏色和大小
這是乙個跨瀏覽器的解決方案。
缺點：這個方式使用的是border,所以你不能新增陰影、漸變、和其他一些css3效果
請記住，ie6是不支援透明邊界的-如果你關心這個問題
2.html 字元
它是基於使用可用的unicode字元列表的字元。
優點它是乙個跨瀏覽器的技術
您可以使用css3的text-shadow屬性新增陰影。
缺點不能使用太多的css3效果，除了使用文字陰影。
在所有的瀏覽器，這是相當不可能實現畫素完美。
3.css 旋轉正方形
理論上,這種方式，你需要使用兩個內容塊，但是，並沒有限制是使用兩個元素，所以可以使用乙個元素加乙個偽元素。
建立乙個內容裡。例如100100畫素 – 這將包含旋轉塊。
旋轉包含的這個塊45度，從而獲得乙個菱形
將菱形的塊向頂部便宜，然後設定溢位，設定父層容器截斷
there you go!
缺點：這個解決方案不是跨瀏覽器的,首先是因為css3旋轉。
本文標題: div+css製作類似微信對話氣泡效果的例項總結
本文位址:
類似微信的文字輸入框
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！首先，這種效果用.9圖我不知道是否可以做出來。如果不用.9圖的話，那就只能用drawable來寫，這種drawable有點複雜，可以採用layerlist來實現，我的思想如下 分三層實現，這裡假設activity的背景是白色，第一層也 就是最底層 ...
類似微信的文字輸入框
首先，這種效果用.9圖我不知道是否可以做出來。如果不用.9圖的話，那就只能用drawable來寫，這種drawable有點複雜，可以採用layerlist來實現，我的思想如下 分三層實現，這裡假設activity的背景是白色，第一層也 就是最底層 是綠色 第二次是白色，但是距離底部有一段小偏移，目的...
類似微信的文字輸入框
首先，這種效果用.9圖我不知道是否可以做出來。如果不用.9圖的話，那就只能用drawable來寫，這種drawable有點複雜，可以採用layerlist來實現，我的思想如下 分三層實現，這裡假設activity的背景是白色，第一層也 就是最底層 是綠色 第二次是白色，但是距離底部有一段小偏移，目的...