How to place curved arrow on top of your speech bubble? [duplicate] - html

Question

This question already has an answer here:
How to create a curved speech bubble?
(1 answer)
Closed 2 years ago.
I want to create a speech bubble similar to the following image using css.
How would I go about doing this?

Answer 1

You can use a radial-gradient with a transparant circle to create the curved tip of the speech bubble. Apply it to the ::before pseudo element of your bubble so it gets placed on top of your speech bubble div.
.bubble::before {
content: '';
height: 30px;
width: 30px;
background: radial-gradient(circle at 100% 0, transparent 30px, cornflowerblue 0);
display: block;
margin-left: 100px;
}
.message {
padding: 10px 20px;
width: 300px;
background: cornflowerblue;
display: block;
font-family: sans-serif;
color: floralwhite;
font-size: 18px;
border-radius: 0 0 10px 10px;
}
<div class="bubble">
<div class="message">
<p>"Tell me and I forget. Teach me and I remember. Involve me and I learn."<p>
<small>Benjamin Franklin</small>
</div>
</div>
Add border on hover
You can use the ::after pseudo element in combination with z-index to create a border effect when hovering over the speech bubble.
.bubble::before,
.bubble::after {
content: '';
display: block;
position: absolute;
}
.bubble::before {
background: radial-gradient(circle at 95% -2px, transparent 25px, cornflowerblue 0);
left: 103px;
top: 10px;
z-index: 1;
height: 25px;
width: 25px;
}
.bubble::after {
background: radial-gradient(circle at 100% 0, transparent 30px, coral 0);
left: 100px;
top: 0px;
z-index: -1;
height: 30px;
width: 30px;
display: none;
}
.message {
padding: 10px 20px;
width: 300px;
background: cornflowerblue;
display: block;
font-family: sans-serif;
color: floralwhite;
font-size: 18px;
border-radius: 0 0 10px 10px;
border: 3px solid white;
margin-top: 30px;
}
.bubble:hover > .message {
border: 3px solid coral;
}
.bubble:hover::after {
display: block;
}
<div class="bubble">
<div class="message">
<p>"Tell me and I forget. Teach me and I remember. Involve me and I learn."<p>
<small>Benjamin Franklin</small>
</div>
</div>