如何用CSS实现带圆角箭头的对话气泡？

我需要用CSS实现带圆角箭头的对话气泡，但现有代码无法让箭头呈现预期的圆角样式，具体情况如下：

预期效果 #

左侧带有圆润小箭头的黑色对话气泡，箭头边缘平滑，与气泡主体风格统一。

尝试效果 #

左侧箭头为尖锐直角样式，无圆角，不符合预期。

尝试的CSS代码 #

.bubble { 
  position: relative; 
  display: inline-block; padding: 10px; 
  border-radius: 10px; 
  background-color: black; 
  color: white; 
  font-family: Arial, sans-serif; 
  font-size: 16px;
  margin-left: 50px;
  width: 200px;
  height: 20px
}

.bubble::after { 
 content: ""; 
 position: absolute; 
 left: -20px; 
 top: 60%; 
 transform: translateY(30%) translateX(50%) rotate(-45deg); 
 border-top: 10px solid transparent; 
 border-right: 20px solid black; 
 border-bottom: 10px solid transparent;
 
}

解决方案 #

使用方形伪元素配合圆角和旋转来实现带圆角的箭头，替代原来的border方案：

.bubble {
  position: relative;
  display: inline-block;
  padding: 10px;
  border-radius: 10px;
  background-color: black;
  color: white;
  font-family: Arial, sans-serif;
  font-size: 16px;
  margin-left: 50px;
  width: 200px;
  height: 20px;
}

.bubble::after {
  content: "";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 16px;
  height: 16px;
  background-color: black;
  border-radius: 0 0 0 3px; /* 仅给对应角添加圆角，匹配箭头方向 */
}

说明 #

1. 放弃用border构造箭头的方式（border无法实现圆角箭头），改用固定宽高的方形伪元素
2. 通过rotate(45deg)将方形旋转成箭头形状
3. 利用border-radius只给箭头的左下角添加圆角，实现平滑边缘
4. 调整left和transform参数，让箭头与气泡主体完美衔接

内容的提问来源于stack exchange，提问作者art