参考

css实现聊天对话框 - 掘金 (juejin.cn)

代码

CSS

.chat_box {
    display: grid;
    padding: 15px 10px;
    margin: 5px 0;
    transition: background-color 0.5s ease-in-out;
}

.left,
.weixin,
.qq {
    position: relative;
    max-width: min(400px, 75%);
    padding: 8px 10px;
    margin: 8px 0;
    border-radius: 5px;
    word-break: break-all;
    line-height: 24px;
}

.left {
    justify-self: left;
    left: 20px;
}

.weixin,
.qq {
    justify-self: end;
    right: 20px;
}

.weixin {
    background-color: #9EEA6A;
}

.qq {
    background-color: #1E6EFF;
    color: #FFF;
}

.left::before,
.weixin::before,
.qq::before {
    content: '';
    position: absolute;
    top: 10px;
    width: 0;
    height: 0;
    border-style: solid;
}

.left::before {
    left: -8px;
    border-width: 8px 10px 8px 0;
}

.weixin::before {
    right: -9px;
    border-width: 8px 0 8px 10px;
}

.qq::before {
    right: -8px;
    border-width: 8px 0 8px 10px;
}

[data-theme='light'] {
    .chat_box {
        background-color: #f5f5f5;
    }

    .left {
        background-color: #FFF;
    }

    .left::before {
        border-color: transparent #fff transparent transparent;
    }

    .weixin::before {
        border-color: transparent transparent transparent #9EEA6A;
    }

    .qq::before {
        border-color: transparent transparent transparent #1E6EFF;
    }
}

[data-theme='dark'] {
    .chat_box {
        background-color: #111111;
    }

    .left,
    .weixin,
    .qq {
        color: #d5d5d5;
    }

    .left {
        background-color: #2c2c2c;
    }

    .weixin {
        background-color: #3eb477;
        color: #111111;
    }

    .qq {
        background-color: #2c2c2c;
    }

    .left::before {
        border-color: transparent #2c2c2c transparent transparent;
    }

    .weixin::before {
        border-color: transparent transparent transparent #3eb477;
    }

    .qq::before {
        border-color: transparent transparent transparent #2c2c2c;
    }
}

HTML

<div class="chat_box">
    <div class="left">我会夺取你的灵魂！</div>
    <div class="weixin">哇哦~</div>
    <div class="qq">圣光会制裁你！</div>
</div>

测试

古尔丹 VS 安度因！

我会夺取你的灵魂！

哇哦~

圣光会制裁你！

这次是你赢了…