.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;
    }
}

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