巧用before和after制作聊天气泡框

1、实际效果图

聊天气泡.jpg

2、页面结构

// html
<div class="box">
    <div class = "before">
        <p>哦My Love 咱们结婚吧</p>
        <p>我会用一生去爱你的</p>
        <p>我愿把一切都放下</p>
        <p>给你幸福的家</p>
    </div>
</div>

//css
        * {
            margin: 0;
            padding: 0
        }

        html, body {
            width: 100%;
        }
        .box{
            width: 90%;
            margin-left: 5%;
            padding: 20px 0 0 0;
        }

        .before{
            position:relative;/*日常相对定位*/
            border:1px solid black;
            border-radius:5px;
            background:rgba(245,245,245,1);
            font-size:12px;
            padding:5px 10px;
        }
        .before:before,.before:after{
            content:"";/*:before和:after必带技能*/
            display:block;
            position:absolute;/*日常绝对定位*/
            top:8px;
            width:0;
            height:0;
            border:6px solid transparent;
        }
        .before:before{
            left:-11px;
            border-right-color:rgba(245,245,245,1);
            z-index:1
        }
        .before:after {
            left: -12px;
            border-right-color: rgba(0, 0, 0, 1);
            z-index: 0
        }