如何用CSS实现两栏布局间的垂直波浪边框？

先搭好基础的两栏布局（以Flex为例）：

<html>
<head>
  <style>
    body {
      margin: 0;
      display: flex;
      min-height: 100vh;
    }
    aside {
      width: 260px;
      background: #f5f5f5;
      position: relative;
      padding: 1rem;
      box-sizing: border-box;
    }
    main {
      flex: 1;
      background: #ffffff;
      padding: 1rem;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
    <aside>
      侧边栏导航菜单
    </aside>
    <main>
      主内容区
    </main>
</body>
</html>

下面提供几种纯CSS实现垂直波浪分隔线的方案：

方案1：单弧度波浪（适配你的水平示例转换） #

通过调整伪元素的圆角方向，直接生成垂直单波浪，无需旋转：

aside::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 25px; /* 波浪的宽度 */
  background-color: #ffffff; /* 与主内容区背景色一致 */
  /* 垂直方向的圆角设置 */
  border-top-right-radius: 50% 100%;
  border-bottom-right-radius: 50% 100%;
}

方案2：连续重复波浪（更自然的分隔效果） #

用径向渐变实现重复的波浪形状，可调整波浪的间距和弧度：

aside::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 14px; /* 波浪宽度 */
  /* 径向渐变生成上下交替的波浪 */
  background: 
    radial-gradient(circle at right top, transparent 72%, #ffffff 72%),
    radial-gradient(circle at right bottom, transparent 72%, #ffffff 72%);
  background-size: 100% 45px; /* 第二个值控制波浪间距 */
  background-repeat: repeat-y;
}

方案3：自定义波浪形状（用clip-path自由调整） #

如果需要更个性化的波浪，可以通过clip-path定义多边形路径：

aside::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 18px;
  background-color: #ffffff;
  /* 自定义波浪路径，调整百分比可改变波浪频率和幅度 */
  clip-path: polygon(
    100% 0%,
    100% 12%,
    0% 24%,
    100% 36%,
    0% 48%,
    100% 60%,
    0% 72%,
    100% 84%,
    0% 96%,
    100% 100%
  );
}

注意事项 #

• 确保伪元素的背景色与相邻栏的背景色完全一致，避免出现断层
• 可通过调整伪元素的width、渐变/clip-path参数，适配不同的设计需求
• 如果布局使用Grid，只需调整定位逻辑，核心的波浪实现代码通用

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