如何使用css制作如图所示的圆形波浪边框？

Question

图像的右侧是问题所在，我无法将边框做成像这样的波浪。 我希望它弯曲但不对称。

这是我使用的最接近的（https://css-generators.com/wavy-shapes/）：

.box {
  --mask:
    radial-gradient(223.61px at calc(100% - 300.00px) 50%,#000 99%,#0000 101%) 0 calc(50% - 200px)/100% 400px,
    radial-gradient(223.61px at calc(100% + 200.00px) 50%,#0000 99%,#000 101%) calc(100% - 100px) 50%/100% 400px repeat-y;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}

Answer 1

尝试使用 mask-image 属性：https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image

您可以使用 svg 图像来获得您需要的确切形状。