css气泡效果

Paste_Image.png

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

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

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即可)，也是遵循"上右下左"的规则。