Html 创建弯曲的语音气泡尾巴

如何使用纯CSS在下图中创建白色背景形状

我已经能够使用

边界半径

实现左上角和右下角的曲线拐角，所以我特别要说的是左下角的尖头“尾巴”形状

我希望能够使用一个伪元素和一些很酷的

边界半径

或

剪辑路径

技巧来创建形状，而不必在伪元素上使用SVG背景

有没有人能用纯CSS实现这一点

该元素在不同颜色的背景上多次出现，因此尾部的“切割”弯曲部分需要透明。

稍加调整有助于实现这一点。基本上，他们所做的就是用一个大的边框围成一个圆圈，然后把不需要的部分切掉。如果你绕着圆圈移动，你可以像你所描述的那样制作一个倒转的圆圈

正文{
背景：绿色；
}
.直肠{
高度：100px；
宽度：100px；
背景：rgba（0,0,0,0.5）；
位置：相对位置；
边缘顶部：100px；
左边距：100px；
}
.圆圈{
显示：块；
宽度：40px；
高度：100px；
顶部：0px；
左：-40px；
位置：绝对位置；
溢出：隐藏；
}
.圆圈：之后{
内容：''；
宽度：100px；
高度：100px；
-moz边界半径：100px；
-webkit边界半径：100px；
边界半径：100px；
背景：rgba（0,0,0,0）；
位置：绝对位置；
顶部：-40px；
左：-100px；
边框：40px实心透明；
变换：旋转（45度）；
右边框：40px实心rgba（0,0,0,0.5）；
}
.溢出{
溢出：可见；
}

---

请分享您迄今为止尝试过的代码