create specific chat bubble shape with CSS - html

Question

I want to make a speech bubble shape identical to the image.
What part of the CSS shown below can be modified to make it look like the picture?
Can you help me to get the look I want?
.body{
background : linear-gradient(to bottom, #fff,red)
}
.chat {
position: relative;
width: 270px;
padding: 10px;
margin: 1em auto 50px;
text-align: center;
color: black;
background: #fff;
border: 1px solid gray;
border-radius: 30px;
}
.chat:before {
content: "";
position: absolute;
z-index: 2;
top: -2px;
left: -7px;
height: 20px;
border-left: 20px solid #E5E5EA;
border-bottom-right-radius: 16px 14px;
-webkit-transform: translate(0, -2px);
}
.chat:after {
content: "";
position: absolute;
z-index: 3;
top: -2px;
left: 4px;
width: 26px;
height: 20px;
background: white;
border-bottom-right-radius: 10px;
-webkit-transform: translate(-30px, -2px);
}
<div class="chat"></div>

Answer 1

We can't bring exactly as it is. I have tried to bring it near the shape.
.chat {
position:relative;
width:270px;
padding:10px;
height:50px;
margin:1em auto 50px;
text-align:center;
color:black;
background:#e5e5ea;
//border: 1px solid gray;
border-radius: 30px;
}
/* creates part of the curve */
.chat:before {
content: "";
position: absolute;
z-index: 2;
top: 7px;
left: -8px;
height: 20px;
border-left: 20px solid #E5E5EA;
border-bottom-right-radius: 16px 14px;
-webkit-transform: translate(0, -2px);
}
/* creates part of the curved pointy bit */
.chat:after {
content: "";
position: absolute;
z-index: 3;
top: 7px;
left: 4px;
width: 26px;
height: 20px;
background: white;
border-top-right-radius: 14px;
-webkit-transform: translate(-30px, -2px);
}
<div class="chat">
</div>

Answer 2

Here's a example based on Pure CSS speech bubbles by Nicolas Gallagher.
It uses overlapping pseudo-elements with border-radius to create the bubble's pointy curved stem. This may not be a pixel-perfect match to your mockup, but you can modify the values to improve the shape as desired.
body {
background: lightgray;
margin: 0;
}
.speech-bubble {
position: relative;
padding: 50px;
margin: 1em 20px;
text-align: center;
color: black;
background: white;
border-radius: 30px;
}
.speech-bubble:before {
content: "";
position: absolute;
z-index:-1;
left: -22px;
top: 0;
width: 40px;
border-bottom: 35px solid white;
border-top-right-radius: 25px;
}
.speech-bubble:after {
content: "";
position: absolute;
z-index:-1;
left: -28px;
top: -3px;
height: 38px;
width: 28px;
background: lightgray;
border-top-right-radius: 20px;
}
<div class="speech-bubble">Hello, world.</div>
This demo might help visualize how the stem is created:
body {
background: lightgray;
margin: 0;
}
.speech-bubble {
position: relative;
padding: 50px;
margin: 1em 20px;
text-align: center;
color: black;
background: white;
border-radius: 30px;
}
.speech-bubble:before {
content: "";
position: absolute;
z-index: -1;
left: -22px;
top: 0;
width: 40px;
border-bottom: 35px solid green;
border-top-right-radius: 25px;
}
.speech-bubble:after {
content: "";
position: absolute;
z-index: -1;
left: -28px;
top: -3px;
height: 38px;
width: 28px;
background: red;
border-top-right-radius: 20px;
}
<div class="speech-bubble">Hello, world.</div>
Also see:
How to create a curved speech bubble?
Speech bubble with arrow