纯css实现微信聊天图

Question

Answer 1

纯色背景完美，图像背景有瑕疵，左边三角内图像是扭曲的。有时间再寻找解决方法吧。
实际效果代码

.pop {
    width: 200px;
    height: 60px;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    margin-left: 10px;
    padding: 10px;
    color: #EFEFEF;
    box-sizing: border-box;
    font-family: "Microsoft YaHei";
    background: gray;
    position:relative;

}

.pop:before {
    content: '';
    display: block;
    position:absolute;
    top:20px;
    width:15px;
    height:15px;
    margin-left: -17px;
    pading-top: 10px;
    -webkit-transform: rotate(-45deg) skew(20deg, 20deg)  translate3d(0, 0, 0);
    -moz-transform: rotate(-45deg) skew(20deg, 20deg)  translate3d(0, 0, 0);
    -ms-transform: rotate(-45deg) skew(20deg, 20deg)  translate3d(0, 0, 0);
    -o-transform: rotate(-45deg) skew(20deg, 20deg)  translate3d(0, 0, 0);
    transform: rotate(-45deg) skew(20deg, 20deg)  translate3d(0, 0, 0);
    overflow:hidden;
    z-index:-1;
    background: gray;

}

Answer 2

<div class="test"></div>

<style type="text/css">
    .test {
        position: relative;
        width: 400px;
        height: 200px;
        border-radius: 10px;
        margin-left: 40px;
        background: url("test.jpg") -20px 0 no-repeat;
        background-size: 420px auto;
    }

    .test:after {
        content: '';
        position: absolute;
        top: 30px;
        left: -40px;
        border: solid #fff;
        border-width: 10px 20px;
        border-right-color: transparent;
        background: inherit;
        background-clip: border-box;
        background-origin: border-box;
        background-position: 20px -30px;
    }
</style>