How to create custom chat icon using css only [duplicate] - html

Question

This question already has answers here:
Speech bubble with arrow
(3 answers)
how to style chat-bubble in iphone classic style using css only
(4 answers)
CSS speech bubble with rounded arrow
(2 answers)
How to create a curve tail for speech bubble with CSS?
(1 answer)
How to make a box with arrow in CSS?
(7 answers)
Closed 2 years ago.
I want to create chat icon using css only. Here's a sample of it:
I don't want to use bootstrap chat icons because it's hard to customize especially the numbers inside the icon grows.

Answer 1

This is a bit like what you have in your request.
.msg1,
.msg2 {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
}
.msg1 {
width: 30px;
height: 25px;
border-radius: 12px;
background-color: #ff6781;
color: white;
}
.msg2 {
width: 35px;
height: 23px;
border-radius: 12px;
border: 2px solid #ff6781;
color: #ff6781;
}
.msg1 p,
.msg2 p {
font-size: 14px;
}
.msg1:after {
content: '';
position: absolute;
background-color: #ff6781;
top: 89%;
left: 35%;
width: 3px;
height: 7px;
transform: rotate(-45deg);
}
.msg1:before {
content: '';
position: absolute;
background-color: #ff6781;
top: 89%;
left: 48%;
width: 3px;
height: 7px;
transform: rotate(45deg);
}
.msg2:after {
content: '';
position: absolute;
background-color: #ff6781;
top: 100%;
left: 35%;
width: 3px;
height: 6px;
transform: rotate(-45deg);
}
.msg2:before {
content: '';
position: absolute;
background-color: #ff6781;
top: 100%;
left: 40%;
width: 3px;
height: 6px;
transform: rotate(45deg);
}
<div class="msg1"><p>4</p></div>
<div class="msg2"><p>11</p></div>
second solution:
.msg1,
.msg2 {
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
}
.msg1 {
width: 30px;
height: 25px;
border-radius: 12px;
background-color: #ff6781;
color: white;
}
.msg2 {
width: 35px;
height: 23px;
border-radius: 12px;
border: 2px solid #ff6781;
color: #ff6781;
}
.msg1 p,
.msg2 p {
font-size: 14px;
}
.msg1:after {
content: '';
position: absolute;
top: 100%;
left: 33%;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 10px solid #ff6781;
}
.msg2:after {
content: '';
position: absolute;
top: 100%;
left: 25%;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 10px solid #ff6781;
}
<div class="msg1"><p>4</p></div>
<div class="msg2"><p>11</p></div>

Answer 2

.chat-icon {
color: #161616;
position: relative;
height: 30px;
width: 60px;
font-size: 1.4rem;
}
.balloon {
display: flex;
position: absolute;
justify-content: center;
border: 2px solid red;
align-items: center;
background-color: white;
border-radius: 2rem;
height: 20px;
width: 100%;
z-index: 2;
}
.stick {
width: 20px;
position: absolute;
height: 8px;
background-color: red;
margin-left: 0.5rem;
transform: rotate(45deg);
top: 15px;
}
<div class="chat-icon">
<div class="balloon">10</div>
<div class="stick"></div>
</div>