css伪元素制作消息框

     直接上代码

     css如下:

           .msg{
                width:200px;height:50px;
                margin-bottom: 20px;
                background: #20B2AA;color:#fff;
                text-align: center;line-height:50px;
                position: relative;
                border-radius:10px  10px 6px 10px;
            }
           .msg::after{
                content: '';
                display: block;
                width:0;height:0;
                border:solid 16px;
                border-top:20px;
                border-color:transparent transparent transparent #20B2AA;
                position: absolute;
                top:8px;right:-30px;

         }

     <div class="msg">你在干嘛呢?</div>
     <div class="msg">我在吃饭，你了？</div>
     <div class="msg">打算出去玩</div>

      效果图: