title: create specific chat bubble shape with CSS
body: <p><a href="https://i.stack.imgur.com/Iu4v5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Iu4v5.png" alt="enter image description here" /></a></p>
  <p>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?</p>
  <pre><code>.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: &quot;&quot;;
    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: &quot;&quot;;
    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);
  }
  
  &lt;div class=&quot;chat&quot;&gt;&lt;/div&gt;
  </code></pre>