Html 自定义CSS聊天泡泡

我用CSS创建了一个聊天泡泡。但是我没有得到我想要的输出。这是我的密码

正文{
背景颜色：浅绿色；
}
.泡泡{
利润率：100像素；
显示：内联块；
位置：相对位置；
宽度：300px；
高度：自动；
背景色：白色；
}
.边界{
边框：2倍纯红；
}
.边界半径{
边界半径：10px；
-webkit边界半径：10px；
-moz边界半径：10px；
}
.右三角形.边框.右上角：之前{
内容：''；
位置：绝对位置；
宽度：0；
身高：0；
左：自动；
右：-26px；
顶部：-2px；
底部：自动；
边界：25px固体；
边框颜色：红色透明；
}
.直角三角形.右上角：后面{
内容：''；
位置：绝对位置；
宽度：0；
身高：0；
左：自动；
右：-22px；
顶部：-0.3px；
底部：自动；
边界：25px固体；
边框颜色：白色透明；
}
.聊天{
填充：6px；
}

Lorem ipsum dolor sit amet，奉献精英

您可以尝试绘制曲线：

可能的例子

正文{
背景颜色：浅绿色；
}
.泡泡{
利润率：100像素；
显示：内联块；
位置：相对位置；
宽度：300px；
高度：自动；
背景色：白色；
}
.边界{
边框：2倍纯红；
}
.边界半径{
边界半径：10px；
-webkit边界半径：10px；
-moz边界半径：10px；
}
.直角三角形.右上角：之前{
内容：''；
位置：绝对位置；
边框顶部：2个红色实体；
宽度：6px；
顶部：-2px；
右：0；
高度：10px；
背景：白色；
}
.直角三角形.右上角：后面{
内容：''；
位置：绝对位置；
宽度：30px；
高度：40px；
左：自动；
右：-30px；
顶部：-2px；
背景：径向梯度（右下角椭圆，透明28px，红色29px，红色30px，白色31px）；
边框顶部：纯红2px；
}
.聊天{
填充：6px；
}

Lorem ipsum dolor sit amet，奉献精英

谢谢。你的回答解决了我的问题。