如何用CSS创建波浪形状？已实现SVG版本，求CSS方案

当然可以用CSS实现你想要的波浪形状效果！下面是几种实用的实现方式：

1. 静态波浪轮廓：使用CSS Clip-path #

这种方法通过定义多边形坐标来精准勾勒波浪的形状，适合不需要动态效果的场景：

.wave-shape {
  width: 100%;
  height: 100px;
  background-color: #42a5f5;
  /* 自定义坐标调整波浪起伏，数值可按需修改 */
  clip-path: polygon(0% 40%, 10% 35%, 20% 40%, 30% 38%, 40% 42%, 50% 39%, 60% 43%, 70% 40%, 80% 44%, 90% 41%, 100% 45%, 100% 100%, 0% 100%);
}

你可以通过调整polygon里的百分比坐标，来微调波浪的起伏高度和频率。唯一需要注意的是，旧版浏览器对clip-path的兼容性稍弱，但现代主流浏览器都支持。

2. 波浪背景填充：CSS渐变+背景定位 #

如果需要用波浪纹理填充一块区域，这种方法兼容性更好，通过重复的渐变图案模拟波浪：

.wave-bg {
  width: 100%;
  height: 200px;
  background: 
    linear-gradient(135deg, #42a5f5 25%, transparent 25%) -50px 0,
    linear-gradient(225deg, #42a5f5 25%, transparent 25%) -50px 0,
    linear-gradient(315deg, #42a5f5 25%, transparent 25%),
    linear-gradient(45deg, #42a5f5 25%, transparent 25%);
  background-size: 100px 100px;
  background-color: #e3f2fd;
}

修改渐变角度、颜色值和background-size，就能得到不同风格的波浪纹理，非常适合做页面背景。

3. 动态波浪边缘：Border-radius + 动画 #

如果你想要带动态效果的波浪边缘，可以用伪元素配合border-radius和CSS动画实现：

.wave-edge {
  width: 100%;
  height: 50px;
  position: relative;
  overflow: hidden;
}
.wave-edge::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background-color: #42a5f5;
  /* 通过不同的圆角值模拟波浪弧度 */
  border-radius: 45% 48% 43% 47%;
  animation: wave-move 5s linear infinite;
}
@keyframes wave-move {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

调整border-radius的数值可以改变波浪的圆润程度，修改动画参数能控制波浪滚动的速度和方向。

如果你的波浪形状比较复杂，CSS可能需要一些调试，但基本的波浪起伏效果都能完美实现。要是想精确还原你SVG里的形状，用clip-path配合精准的坐标是最优选择~

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