css - 具有曲线边缘的剪辑路径多边形

Question

目标是实现这一点。

我到了这里。

如何 flex 底部边缘？任何帮助表示赞赏。
div 类 =“曲线消息”/>

.curved-message{
背景:'浅蓝色'；
剪辑路径:多边形(0% -20%、100% 0%、100% 90%、56% 90%、52% 100%、48% 90%、0% 90%)；
边框半径:25px；
边距顶部:250px；
高度:345px；
边框顶部:4px 纯白色；
左边框:4px 纯白色；
右边框:4px 纯白色；
最大宽度:750px；
}

Answer 1

也许另一种方法来做到这一点？

.curved-message {
  position: relative;
  width: 300px;
  height: 100px;
  background: lightblue;
  border-radius: 15px;
}
.curved-message:before {
  content: "";
  width: 30px;
  height: 30px;
  background: lightblue;
  position: absolute;
  bottom: -15px;
  left: 50%;
  -webkit-transform: translateX(-50%) rotate(45deg);
  transform: translateX(-50%) rotate(45deg);
}

<div class="curved-message">

</div>