巧用border特性实现聊天气泡效果

Posted 2020-06-10

利用border特性，实现三角形，很简单，我们直接看效果：

html:

<div class="bubble-container ">你好么
    <div class="bubble-tail"></div>
</div>

css：

.bubble-container {
            height: 100px;
            line-height: 100px;
            margin-bottom: 2em;
            padding-left: 2em;
            background: #3EC22D;
            position: relative;
            font-family: "微软雅黑";
            color: white;
            border-radius: 10px;
        }

        .bubble-container .bubble-tail {
            width: 0px;
            height: 0px;
            position: absolute;
            left: 50px;
            border-width: 15px;
            border-style: solid;
            border-color: #3EC22D transparent transparent transparent;
        }