实现效果

聊天气泡

实现原理

基于HTML元素边框原理及CSS伪元素实现气泡小尖角。关键点如下：

元素边框实际是由梯形组成。
当元素宽高为0、边框不断加粗时，实际边框是成三角形。
保留元素的其中一个边框，透明化另外3个边框。
通过元素的层级关系用两个三角形遮盖形成带边框的小三角。
这里使用CSS伪元素实现两个小三角。

元素边框

实现代码

<html>
<head>
<meta charset='UTF-8'/>
<style>
    .msg_left {
        position: absolute;
        margin: 30px 30px;
        max-width: 200px;
        min-height: 20px;
        padding: 8px;
        border: solid 1px #ff6a00;
        border-radius: 10px;
        background: limegreen;
    }
    .msg_left:before {
        position: absolute;
        top: 6px;
        left: -20px;
        padding: 0;
        border: 10px solid;
        border-color: transparent #ff6a00 transparent transparent;
        display: block;
        content: '';
        z-index: 9;
    }
    .msg_left:after {
        position: absolute;
        top: 6px;
        left: -18px;
        padding: 0;
        border: 10px solid;
        border-color: transparent limegreen transparent transparent;
        display: block;
        content: '';
        z-index: 10;
    }
    /* 右边省略，气泡样式类似 */
</style>
</head>
<title>对话框</title>
<body>
    <div class='msg_left'>
        你好，这是内容。Hello,this is massage.
    </div>
    <div class='msg_right'>
        你好，这是内容。Hello,this is massage.
    </div>
</body>
</html>

H5聊天对话气泡的一种实现方式及原理

实现效果

实现原理

实现代码