先来分析一下聊天气泡
气泡分割为两部分，左边的矩形，右边的三角形
矩形的实现比较简单
先对对右边的三角形进行分析
div{width:100px;height:100px;border:solid 50px;border-color:#f5f5f5 #f5f5f5 #f5f5f5 #F8C301;}
如果把width，height置为0，效果则如下图
div{width:100px;height:100px;border:solid 50px;border-color:#f5f5f5 #f5f5f5 #f5f5f5 #F8C301;}
只需要三角形，所以把border的其中一边设置为你需要的颜色，其他三个border颜色则设置为与背景颜色相同，就得到了我们想要的三角形
所以这就是聊天气泡三角形的css
把矩形跟三角形结合在一起则变成这样子
左边矩形样式
.sendBox {
float: right;
position:relative;
right:5px;
width:auto;
max-width:180px;
min-height:32px;
line-height: 32px;
padding: 2px 8px;
font-size: 14px;
background:#F8C301;
border-radius:5px; /* 圆角 */
margin:10px 0px;
}
右边三角形样式
.sendBox .arrow {
position:absolute;
top:5px;
right:-16px; /* 圆角的位置需要细心调试哦 */
width:0;
height:0;
font-size:0;
border:solid 8px;
border-color:#f5f5f5 #f5f5f5 #f5f5f5 #F8C301;
}
使用CSS伪类after，before，实现聊天气泡
<body><div class="chat-bubble chat-bubble-left">这是聊天左气泡</div><div class="chat-bubble chat-bubble-right">这是聊天右气泡</div><div class="chat-bubble chat-bubble-top">这是聊天上气泡</div><div class="chat-bubble chat-bubble-bottom">这是聊天下气泡</div></body>
.chat-bubble{position: relative;margin:12px;padding:5px 8px;word-break: break-all;background:#fff;border: 1px solid #989898;border-radius: 5px;max-width:180px;}.chat-bubble-left {}.chat-bubble-left:before {content: '';position: absolute;width: 0;height: 0;left: -20px;top:5px;border: 10px solid;border-color:transparent #989898 transparent transparent ;}.chat-bubble-left:after {content: '';position: absolute;width: 0;height: 0;left:-16px;top:7px;border: 8px solid;border-color:transparent #ffffff transparent transparent ;}.chat-bubble-right {}.chat-bubble-right:before {content: '';position: absolute;width: 0;height: 0;right: -20px;top:5px;border: 10px solid;border-color:transparent transparent transparent #989898;}.chat-bubble-right:after {content: '';position: absolute;width: 0;height: 0;right:-16px;top:7px;border: 8px solid;border-color:transparent transparent transparent #ffffff ;}.chat-bubble-top {}.chat-bubble-top:before {content: '';position: absolute;width: 0;height: 0;left:10px;top:31px;border: 10px solid;border-color: #989898 transparent transparent transparent ;}.chat-bubble-top:after {content: '';position: absolute;width: 0;height: 0;left:12px;top:30px;border: 8px solid;border-color:#ffffff transparent transparent transparent ;}.chat-bubble-bottom {}.chat-bubble-bottom:before {content: '';position: absolute;width: 0;height: 0;right:10px;top:-21px;border: 10px solid;border-color:transparent transparent #989898 transparent ;}.chat-bubble-bottom:after {content: '';position: absolute;width: 0;height: 0;right:12px;top:-16px;border: 8px solid;border-color:transparent transparent #ffffff transparent ;}
