chat message block with arrow css - html

Question

I need to make this exact div with right arrow. As you can see it's little bit curved
Here's what I got. I want to make it a little bit longer and curved as in picture above
.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

Here's the bubble's code
.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);
}
About the right arrow, what about using a background-image (png). If you want that shape you need to use border-radius. Using a .png image is way easier.
By the way, I wouldn't use a unique div to be a container and a text-wrapper...