CSS 末尾带有圆箭头的语音气泡

Question

我需要使用 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;
 
}

这是我最好的尝试。我无法像第一张图片中那样使箭头变圆。

Answer 1

试试这个箭头：

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 46 48" style="enable-background:new 0 0 46 48;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#FFFFFF;}
</style>
<g>
    <rect class="st0" width="45.5" height="47.7"/>
    <path d="M10,45.1c-2,0.5-4.1-0.1-5.6-1.5C2.9,42.1,2.2,40,2.7,38l7.6-37.7l-0.1-0.2H7.9C8,0.3,8.1,0.5,8.2,0.7L0.7,37.6
        c-1.2,5.8,4,10.8,9.7,9.4l34.7-8.8c0.1,0.1,0.2,0.1,0.3,0.2v-2.3L10,45.1z"/>
</g>
</svg>