带有曲线边的剪辑路径多边形

Question

Goal is to achieve this.点击链接。

我到了这里。如何弯曲底边？任何帮助表示赞赏。

I got till here.

  div class="curved-message"/>

.curved-message{
    background: 'lightblue';
    clip-path: polygon(0% -20%, 100% 0%, 100% 90%, 56% 90%, 52% 100%, 48% 90%, 0% 90%);
    border-radius: 25px;
    margin-top: 250px;
    height: 345px;
    border-top: 4px solid white;
    border-left: 4px solid white;
    border-right: 4px solid white;
    max-width: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>

Answer 2

这里http://bennettfeely.com/clippy/的好多边形剪切路径生成器

clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

这里的好手册https://css-tricks.com/clipping-masking-css/