三角形对话气泡效果

先贴图：

做项目要实现这样一个效果，第一眼一看很简单用三角形实现，但外面有一层边框，所以需要两个三角形来实现这样的效果。

html:

<div class="ans clearfix">        <img src="../../images/avatar.png" alt="">        <p class="a_txt">            绑卡放款了，说明借贷关系已成立你注销银行卡也没有用，借款指向的是你个人。            <i class="triangle">                <span></span>            </i>        </p>    </div>

此处css用的sass 的语法来写的：

    .ans {        img {            float: left;            margin-top: 10rem/$const;            border-radius: 50%;        }        p {            float: left;            position: relative;            width: 392rem/$const;            height: 116rem/$const;            border: 1px solid #ddd;            margin-left: 34rem/$const;            padding-top: 32rem/$const;            padding-bottom: 32rem/$const;            padding-left: 28rem/$const;            padding-right: 28rem/$const;            border-radius: 20rem/$const;            background: $white;            font-size: 30rem/$const;            .triangle {                position: absolute;                top: 46rem/$const;                left: -32rem/$const;                width: 0;                height: 0;                border-width: 16rem/$const;                border-style: solid;                border-color: transparent #ddd transparent transparent;                span {                    position: absolute;                    top: -15rem/$const;                    left: -14rem/$const;                    width: 0;                    height: 0;                    border-width: 15rem/$const;                    border-style: solid;                    border-color: transparent $white transparent transparent;                }            }        }    }