html - 使用 CSS 创建特定的聊天气泡形状

Question

我想制作与图像相同的对话泡泡形状。下面显示的 CSS 的哪一部分可以修改以使其看起来像图片？你能帮我得到我想要的样子吗？

.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

我们无法完全按照原样提供。我试着让它接近形状。

.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>