如何用CSS实现如图所示的非对称圆角波浪边框？

要做右侧带弧度的非对称波浪边框，你当前用CSS生成器得到的代码是对称渐变，所以达不到预期效果。调整径向渐变的位置和尺寸参数，就能实现非对称形态，试试这段代码：

.box {
  --mask:
    /* 上半段非对称波浪 */
    radial-gradient(180px at calc(100% - 250px) 30%, #000 99%, #0000 101%) 0 0 / 100% 200px,
    /* 下半段非对称波浪 */
    radial-gradient(200px at calc(100% - 220px) 70%, #000 99%, #0000 101%) 0 200px / 100% 200px repeat-y;
  -webkit-mask: var(--mask);
          mask: var(--mask);
  /* 示例基础样式，按需修改 */
  width: 400px;
  height: 500px;
  background: #4285F4;
}

调整技巧： #

• 修改at calc(100% - Xpx) Y%里的X值，控制波浪离右侧边框的距离；Y值控制波浪在垂直方向的位置，以此实现非对称效果
• 调整180px、200px这类渐变半径，改变波浪的弧度大小
• 上下两段渐变可以单独设置参数，完全自定义非对称的波浪形态

你当前生成的效果：

内容的提问来源于stack exchange，提问作者Guy Binya