CSS-具有波浪边框

提问者：小点点

我试图得到我的登陆页面的主图像有这些漂亮的波浪边框。目前我有:https://clientsformentalhealthspecialists.com/

但是，我想这样:https://patcs.com/

我一直在玩边框半径，但我在网上找不到任何代码，可以给我这个不错的“波”效果。

以下是我目前所掌握的:

.topbanner {
    width: 100%;
    height: 540px;
    position: relative;
    border-radius: 50%/0 0 50px 70px;
}

有人知道我能做什么来得到这些想要的结果吗？

谢谢

共2个答案

匿名用户

在此处创建波形:https://getwaves.io/并将它们放置在div的底部，如下所示:

#wave {
  bottom: 0;
  width: 100%;
  height: 100px;
  position: absolute;
}

匿名用户

使用SVG制作:https://getwaves.io/On https://patcs.com/wave是使用SVG制作的。将absoulte放置在SVG上，并将其放入与img(bg)相同的容器中。