CSS实现聊天气泡效果

html

<div class="pop"><div class="arrow"></div></div>

css

/*气泡*/.pop {position:relative;width:100px;height:35px;line-height: 33px;/*background:#fff;*/color:#fff;border-radius:5px; /* 圆角 */background-color: #4D4948;border:1px solid #4D4948;text-align: center;margin-right: 30px;}/*尖角在左侧*/.pop .arrow {position:absolute;top:5px;left:-16px; /* 圆角的位置需要细心调试哦 */width:0;height:0;font-size:0;border:solid 8px;border-color:#fff #4D4948 #fff #fff;}