Paste_Image.png

最近移動(dòng)端項(xiàng)目需要實(shí)現(xiàn)像微信語(yǔ)音一樣的樣式框，如上圖所示，查找了一些資料發(fā)現(xiàn)實(shí)現(xiàn)起來(lái)蠻簡(jiǎn)單的，特意記錄下.
html結(jié)構(gòu)如下:

<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; /* 圓角的位置需要細(xì)心調(diào)試哦 */
            width:0;
            height:0;
            font-size:0;
            border:solid 8px;
            border-color:#4D4948 #4D4948 #4D4948 #F8C301;
        }

實(shí)現(xiàn)出來(lái)的效果為

Paste_Image.png

如果要實(shí)現(xiàn)小三角形在左邊顯示，只需要更改border-color的顏色就可以啦(就是把目前#F8C301和第二個(gè)#4D4948調(diào)換位置，再將right改為left即可)，也是遵循"上右下左"的規(guī)則。