传统的聊天气泡
什么又是传统的聊天气泡,直接上图
代码如下
1 <div class="comment"></div> 2 3 <style type="text/css"> 4 .comment { 5 width: 150px; 6 height: 35px; 7 position: relative; 8 margin: 30px auto 0; 9 background: #f8ac09; 10 border-radius: 5px; 11 } 12 13 .comment:after { 14 content: ''; 15 width: 0; 16 height: 0; 17 position: absolute; 18 top: 5px; 19 right: -16px; 20 border: solid 8px; 21 border-color: transparent transparent transparent #f8ac09; 22 font-size: 0; 23 } 24 </style>
实现方式大家早有耳闻，圆角矩形和三角形嘛，三角形原理就是 border 可以设置为透明，可以复制上例中的代码修改 border-color 属性摸索三角形的实现。
注：IE8 更早版本对 border 的 transparent 支持不是很好。大家可以无视低版本缺陷，因为大部分浏览器都显示正常，非要兼容的话把 transparent 属性设置为主背景色而不是气泡背景色（前提是背景为纯色）。
想必大家都知道，这里不赘述，聊一聊其他实现方法。
这里的三角形部分可以使用正方形代替，实现同样效果，方法就是旋转小正方形使其一部分露在外面。代码如下
1 .comment { 2 position: relative; 3 150px; 4 height: 35px; 5 background: #f8ac09; 6 border-radius: 5px; 7 margin: 30px auto 0; 8 } 9 10 .comment:after { 11 content: ''; 12 position:absolute; 13 top: 10px; 14 right: -4px; 15 8px; 16 height: 8px; 17 transform: rotate(45deg); 18 background-color: #f8ac09; 19 }
缺点是小三角只能是直角三角形，当然也可以通过变换得到菱形再进行拼接，变换多了感觉没有第一种方式直接，浏览器兼容 transform(2D) 属性如下
第一种方式本身就是 border 透明，怎么再给它设置 border 是个问题，暂且先不考虑。
第二种方式如果使用小正方形旋转，层级叠加是个问题，因为设计稿中的气泡背景为 rgba(247, 188, 10, 0.03) 先看下实现代码
1 .comment { 2 150px; 3 height: 35px; 4 position:relative; 5 margin: 30px auto 0; 6 background-color: rgba(247, 188, 10, 0.03); 7 border: 1px solid rgba(252, 185, 8, 0.35); 8 border-radius: 5px; 9 } 10 11 .comment:after { 12 content: ''; 13 8px; 14 height: 8px; 15 position: absolute; 16 top: 10px; 17 right: -4px; 18 transform: rotate(45deg); 19 background-color: rgba(247, 188, 10, 0.03); 20 border: 1px solid rgba(252, 185, 8, 0.35); 21 }
效果如下
上面的思路有问题，因为小正方形与气泡的一部分会重合，半透明背景的部分总会出现问题，有人说了偷个懒总可以吧，把透明后的背景色吸取出来然后再进行叠加（因为大家注意到设计稿的整体背景是纯色）
按着这个思路去实现，那么问题又来了。具体两个问题如下。
1.如果小正方形叠加在上，那么小正方形左半部分的边框就会显示
1 .comment { 2 150px; 3 height: 35px; 4 position: relative; 5 margin: 30px auto 0; 6 background-color: #faf8f3; 7 border: 1px solid #fbe2a0; 8 border-radius: 5px; 9 } 10 11 .comment:after { 12 content: ''; 13 8px; 14 height: 8px; 15 position:absolute; 16 top: 10px; 17 right: -4px; 18 transform: rotate(45deg); 19 background-color: #faf8f3; 20 border: 1px solid #fbe2a0; 21 }
效果如下，比较之前的图片圆角矩形的右边确实遮住了，但小正方形左边的边框显示出来了
处理方式呢，可以这样。
1 .comment:after { 2 content: ''; 3 8px; 4 height: 8px; 5 position: absolute; 6 top: 10px; 7 right: -5px; 8 transform: rotate(45deg); 9 background-color: #faf8f3; 10 border: 1px #fbe2a0; 11 border-style: solid solid none none; 12 }
我们发现问题解决了。效果如下
我们向 div 中加文字。
<div class="comment">Hello,orange.Welcome to FrontEnd World!</div>效果如下
我们发现字母 o 的右下角被小正方形左侧覆盖了，当然可以通过 z-index 属性 hack。
2.如果小正方形在圆角矩形下，那么圆角矩形的右边框就会完整显示，大家自行脑补，此方案不合理，不过多解释。
以上的方法缺点也都很明显，那怎么做才能更严谨，能根据需求的变化不大伤筋骨呢？
我们还用三角形的方案！ what? 不是说三角形的方案不可行了嘛 ？
一个三角形是不可行那两个呢，我们有请 after 的兄弟 before 出场。项目的真实代码如下
1 .reply { 2 position: relative; 3 margin: 0.672rem 0 0.096rem 0; 4 padding: 0.408rem 0.816rem; 5 6 border: 1px solid rgba(#fcb908, 0.35); 7 border-radius: 0.2rem; 8 background-color: rgba(#f7bc0a, 0.03); 9 10 &:after { 11 content: ''; 12 0px; 13 height: 0px; 14 border-color: transparent transparent #faf8f3 transparent ; 15 border-style: solid; 16 border- 6px; 17 position: absolute; 18 top: -11px; 19 border-radius: 3px; 20 left: 18px; 21 right: auto; 22 } 23 24 &:before { 25 content: ''; 26 0px; 27 height: 0px; 28 border-color: transparent transparent rgba(#fcb908, 0.35) transparent; 29 border-style: solid; 30 border- 7px; 31 position: absolute; 32 top: -14px; 33 border-radius: 3px; 34 left: 17px; 35 right: auto; 36 } 37 }
注：这段代码用的是 SASS 进行预编译，如果从头仔细看到这里的话不难理解，两个三角形叠加，大三角形颜色是边框的颜色，小三角形是内部背景色，小三角形绝对定位时向下移 3px 把圆角矩形的一部分上边框遮挡，这样小三角下部也有溢出，具体在两像素之内，实际上不存在遮挡文本问题。