本篇文章给大家带来的内容是介绍css3巧妙实现聊天气泡效果的方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

前一阵子敢玩的 Mobile 页改版完成了，就之前的页面风格更加扁平化，从暗色系为主背景转到亮色背景，去掉更多的阴影，给用户简约的体验风格，哈哈我不是设计师不过多评价啦。感兴趣的朋友可以直接去 idarex移动端主页。

这次改版的所有 style 都是 orange 写的，感触颇多，分期分享给大家

下面说正题，说好的聊天气泡呢？

传统的聊天气泡

什么又是传统的聊天气泡,直接上图

立即学习“前端免费学习笔记（深入）”；

代码如下

<p></p><style>  .comment {    width: 150px;    height: 35px;    position: relative;    margin: 30px auto 0;    background: #f8ac09;    border-radius: 5px;  }  .comment:after {    content: &#39;&#39;;    width: 0;    height: 0;    position: absolute;    top: 5px;    right: -16px;    border: solid 8px;    border-color: transparent transparent transparent #f8ac09;    font-size: 0;  }</style>

实现方式大家早有耳闻，圆角矩形和三角形嘛，三角形原理就是 border 可以设置为透明，可以复制上例中的代码修改 border-color 属性摸索三角形的实现。

想必大家都知道，这里不赘述，聊一聊其他实现方法。

这里的三角形部分可以使用正方形代替，实现同样效果，方法就是旋转小正方形使其一部分露在外面。代码如下

.comment {  position: relative;  width: 150px;  height: 35px;  background: #f8ac09;  border-radius: 5px;  margin: 30px auto 0;}.comment:after {  content: '';  position:absolute;  top: 10px;  right: -4px;  width: 8px;  height: 8px;  transform: rotate(45deg);  background-color: #f8ac09;}

缺点是小三角只能是直角三角形，当然也可以通过变换得到菱形再进行拼接，变换多了感觉没有第一种方式直接，浏览器兼容 transform(2D) 属性如下

总体还不错，几种方法都能放心使用，不存在大的兼容问题。

现实案例

这里的设计稿多了一个边框，直接上设计稿

？想一想怎么处理，我们回顾上文

第一种方式本身就是 border 透明，怎么再给它设置 border 是个问题，暂且先不考虑。

第二种方式如果使用小正方形旋转，层级叠加是个问题，因为设计稿中的气泡背景为 rgba(247, 188, 10, 0.03) 先看下实现代码

.comment {  width: 150px;  height: 35px;  position:relative;  margin: 30px auto 0;  background-color: rgba(247, 188, 10, 0.03);  border: 1px solid rgba(252, 185, 8, 0.35);  border-radius: 5px;}.comment:after {  content: '';  width: 8px;  height: 8px;  position: absolute;  top: 10px;  right: -4px;  transform: rotate(45deg);  background-color: rgba(247, 188, 10, 0.03);  border: 1px solid rgba(252, 185, 8, 0.35);}

效果如下

上面的思路有问题，因为小正方形与气泡的一部分会重合，半透明背景的部分总会出现问题，有人说了偷个懒总可以吧，把透明后的背景色吸取出来然后再进行叠加（因为大家注意到设计稿的整体背景是纯色）

按着这个思路去实现，那么问题又来了。具体两个问题如下。

1.如果小正方形叠加在上，那么小正方形左半部分的边框就会显示

.comment {  width: 150px;  height: 35px;  position: relative;  margin: 30px auto 0;  background-color: #faf8f3;  border: 1px solid #fbe2a0;  border-radius: 5px;}.comment:after {  content: '';  width: 8px;  height: 8px;  position:absolute;  top: 10px;  right: -4px;  transform: rotate(45deg);  background-color: #faf8f3;  border: 1px solid #fbe2a0;}

效果如下，比较之前的图片圆角矩形的右边确实遮住了，但小正方形左边的边框显示出来了

处理方式呢，可以这样。

.comment:after {  content: '';  width: 8px;  height: 8px;  position: absolute;  top: 10px;  right: -5px;  transform: rotate(45deg);  background-color: #faf8f3;  border: 1px #fbe2a0;  border-style: solid solid none none;}

我们发现问题解决了。效果如下

设计稿是有 padding 的，亲测本案例中可行，但是本着认真的原则 padding-right 如果过小，会出现什么问题呢？

我们向 p 中加文字。

<p>Hello,orange.Welcome to FrontEnd World!</p>

效果如下

我们发现字母 o 的右下角被小正方形左侧覆盖了，当然可以通过 z-index 属性 hack。

2.如果小正方形在圆角矩形下，那么圆角矩形的右边框就会完整显示，大家自行脑补，此方案不合理，不过多解释。

标签： 聊天气泡