如何用CSS实现波浪样式？如何将指定设计转为CSS代码？

方案1：伪元素+border-radius模拟简单波浪 #

适合小型规则波浪，通过多个圆角元素拼接实现：

.wave-simple {
  position: relative;
  width: 100%;
  height: 100px;
  background: #42a5f5;
}

.wave-simple::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: radial-gradient(circle at 20px -10px, transparent 20px, #fff 21px);
  background-size: 40px 20px;
}

方案2：clip-path自定义波浪路径 #

适合需精确控制形状的场景，可通过在线工具生成路径代码：

.wave-clip-path {
  width: 100%;
  height: 120px;
  background: #66bb6a;
  clip-path: polygon(0% 10%, 10% 0%, 20% 10%, 30% 0%, 40% 10%, 50% 0%, 60% 10%, 70% 0%, 80% 10%, 90% 0%, 100% 10%, 100% 100%, 0% 100%);
}

方案3：SVG背景实现自然波浪 #

适合流畅复杂的波浪效果，直接内嵌SVG代码作为背景：

.wave-svg {
  width: 100%;
  height: 150px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%232196f3" fill-opacity="1" d="M0,192L48,181.3C96,171,192,149,288,149.3C384,149,480,171,576,181.3C672,192,768,192,864,170.7C960,149,1056,107,1152,101.3C1248,96,1344,128,1392,144L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom center;
  background-size: cover;
}

根据你提供的设计（顶部带平滑波浪弧度的白色卡片，下方为浅灰背景），通过SVG背景+容器定位实现：

HTML结构

<div class="wave-card-container">
  <div class="wave-card">
    <h3>卡片标题</h3>
    <p>这里是卡片内容</p>
  </div>
</div>

CSS代码

.wave-card-container {
  width: 100%;
  min-height: 300px;
  background: #f0f0f0;
  padding-top: 60px; /* 预留波浪高度 */
  position: relative;
}

.wave-card-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120"><path fill="%23ffffff" fill-opacity="1" d="M0,96L48,85.3C96,75,192,53,288,58.7C384,64,480,96,576,101.3C672,107,768,85,864,80C960,75,1056,85,1152,90.7C1248,96,1344,96,1392,96L1440,96L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z"></path></svg>') no-repeat top center;
  background-size: cover;
}

.wave-card {
  width: 80%;
  margin: 0 auto;
  background: #ffffff;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

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