带有箭头css的聊天消息块

Question

我需要使用右箭头使这个div准确。如您所见，它有点弯曲

这就是我得到的。我想像上面的图片那样使其更长一点并弯曲

.speech-bubble {
      display:inline-block;
      padding:5px;
    	position: relative;
    	background: #dcf8c6;
    	border-radius: .4em;
    }
    
    .speech-bubble:after {
    	content: '';
    	position: absolute;
    	right: 0;
    	top: 50%;
    	width: 0;
    	height: 0;
    	border: 5px solid transparent;
    	border-left-color: #dcf8c6;
    	border-right: 0;
    	margin-top: -5px;
    	margin-right: -5px;
    }

  
<div class="speech-bubble"> Hello Mike! Could you please call me back </div>

Answer 1

.speech-bubble {
  display: inline-block;
  position: relative;
}

.speech-bubble > span {
  background: #dcf8c6;
  border-radius: 0.4em;
  display: inline-block;
  padding: 10px;
  z-index: 1;
}

.speech-bubble::after {
  background-color: #ffffff;
  border-radius: 0 0 50% 0;
  border-right: 0;
  bottom: 14px;
  content: '';
  height: 30px;
  margin-top: -5px;
  margin-right: -5px;
  position: absolute;
  right: -21px;
  transform: rotate(10deg);
  width: 30px;
  z-index: -1;
}

.speech-bubble::before {
  background-color: #dcf8c6;
  border-radius: 50%;
  border-right: 0;
  bottom: 7px;
  content: '';
  height: 30px;
  margin-top: -5px;
  margin-right: -5px;
  position: absolute;
  right: -11px;
  transform: rotate(20deg);
  width: 30px;
  z-index: -1;
}

<div class="speech-bubble">
  <span>Hello Mike! Could you please call me back</span>
</div>

Answer 2

这是气泡的代码

.speech-bubble {
    display: inline-block;
    padding: .5em 2em 2em 2em;
    position: relative;
    background: #dcf8c6;
    border-radius: .4em;
    font-family: 'Arial', sans-serif;
    color: #888;
    box-shadow: 2px 2px 1px rgba(0,0,0,0.2);
}

关于向右箭头，使用背景图片（png）会怎样。如果要使用该形状，则需要使用边框半径。使用.png图像更容易。

顺便说一句，我不会使用唯一的div作为容器和文本包装器...