html 气泡上升效果,css气泡效果

Paste_Image.png

最近移动端项目需要实现像微信语音一样的样式框，如上图所示，查找了一些资料发现实现起来蛮简单的，特意记录下.

html结构如下:

css代码为:

body {

background:#4D4948;

}

.send {

position:relative;

width:150px;

height:35px;

background:#F8C301;

border-radius:5px; /* 圆角 */

margin:30px auto 0;

}

.send .arrow {

position:absolute;

top:8px;

right:-16px; /* 圆角的位置需要细心调试哦 */

width:0;

height:0;

font-size:0;

border:solid 8px;

border-color:#4D4948 #4D4948 #4D4948 #F8C301;

}

实现出来的效果为

Paste_Image.png

如果要实现小三角形在左边显示，只需要更改border-color的颜色就可以啦(就是把目前#F8C301和第二个#4D4948调换位置，再将right改为left即可)，也是遵循"上右下左"的规则。