CSS创建消息箭头

这项任务仅限于CSS编码

我需要创建一个左右两侧都有箭头的聊天框

附件是右侧的参考图像。对于左侧，箭头应位于左侧

来自用户A的文本消息示例
来自用户B的文本消息示例

.talk bubble{
利润率：40像素；
显示：内联块；
位置：相对位置；
宽度：200px；
高度：自动；
背景颜色：蓝色；
}
.三角形.左上角：后面{
内容：''；
位置：绝对位置；
宽度：0；
身高：0；
左：-20px；
右：自动；
顶部：0px；
底部：自动；
边界：22px固体；
边框颜色：蓝色透明；
}
.三角形.右上角：之前{
内容：''；
位置：绝对位置；
宽度：0；
身高：0；
左：自动；
右：-20px；
排名：0；
底部：自动；
边界：32px固体；
边框颜色：蓝色透明；
}
.talktext{
颜色：白色；
填充：1em；
}

左上齐平

顶部齐平

使用

:after

和

:before

psuedo.Cool任务。你试过什么？如何在内容中获得斜线？我试着从中复制，但无法设置正确的值使其看起来完美。谢谢

<div class="message_wrapper">
 <div class="message">
 Sample Text Message from User A
 </div>
</div>

<div class="message_wrapper right">
 <div class="message">
 Sample Text Message from User B
 </div>
</div>