如何用CSS实现Div波浪边框？React+Chakra UI场景求方案

针对你遇到的移动端界面顶部/底部波浪边框问题，以下两种纯CSS方案可以完美解决响应式和效果问题，适配Chakra UI的使用场景：

方案一：径向渐变伪元素实现（简单易调整） #

利用伪元素配合径向渐变生成重复的半圆波浪，自动适配容器宽度，无需额外文件。

顶部波浪边框示例 #

import { Box } from '@chakra-ui/react';

const WaveTopContainer = ({ children }) => {
  return (
    <Box
      position="relative"
      bg="white" // 替换为你的容器背景色
      py={6}
      px={4}
    >
      {/* 顶部波浪伪元素 */}
      <Box
        position="absolute"
        top="0"
        left="0"
        width="100%"
        height="18px" // 波浪高度
        css={{
          // 径向渐变生成半圆，重复平铺
          background: `radial-gradient(circle at 50% 0%, transparent 9px, white 9px) repeat-x`,
          backgroundSize: `18px 18px`, // 波浪间距+高度，和height保持一致
        }}
      />
      {children}
    </Box>
  );
};

底部波浪边框示例 #

const WaveBottomContainer = ({ children }) => {
  return (
    <Box
      position="relative"
      bg="white"
      py={6}
      px={4}
      overflow="hidden"
    >
      {/* 底部波浪伪元素 */}
      <Box
        position="absolute"
        bottom="0"
        left="0"
        width="100%"
        height="18px"
        css={{
          background: `radial-gradient(circle at 50% 100%, transparent 9px, white 9px) repeat-x`,
          backgroundSize: `18px 18px`,
        }}
      />
      {children}
    </Box>
  );
};

调整技巧：修改height和backgroundSize的数值可以改变波浪的大小和密度；替换white为对应背景色，确保波浪和容器/外部背景无缝衔接。

方案二：Clip-path裁剪实现（自定义波浪形状） #

通过clip-path属性直接裁剪容器边缘为波浪形状，支持自定义波浪的起伏频率和形状，完全响应式。

const CustomWaveContainer = ({ children, isTopWave = true }) => {
  return (
    <Box
      bg="white"
      py={6}
      px={4}
      css={{
        clipPath: isTopWave
          ? // 顶部波浪路径：控制12.5%的间隔生成起伏
            'polygon(0 18px, 12.5% 0, 25% 18px, 37.5% 0, 50% 18px, 62.5% 0, 75% 18px, 87.5% 0, 100% 18px, 100% 100%, 0 100%)'
          : // 底部波浪路径
            'polygon(0 0, 100% 0, 100% calc(100% - 18px), 87.5% 100%, 75% calc(100% - 18px), 62.5% 100%, 50% calc(100% - 18px), 37.5% 100%, 25% calc(100% - 18px), 12.5% 100%, 0 calc(100% - 18px))',
      }}
    >
      {children}
    </Box>
  );
};

调整技巧：修改路径中的18px数值可以改变波浪高度；调整百分比数值（如12.5%）可以改变波浪的密度，数值越小波浪越密集。

常见问题解决 #

• 之前绝对定位方案效果差：大概率是伪元素背景色未与容器/外部背景匹配，或z-index层级冲突，上述方案通过直接设置伪元素背景为容器色，避免层级问题。
• SVG响应性问题：若后续仍想用SVG，需给SVG设置viewBox="0 0 100 20"并设置width:100%, height:auto，但纯CSS方案更轻量化。

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