网页全屏波浪效果实现求助：CSS/SVG方案替代PNG图片

Hey there! Let's get that full-width wave sorted for your website. Your initial SVG was really close—you just hit a tiny case-sensitive snag with viewbox (it needs to be viewBox, capital B). Let's break down both fixed SVG and pure CSS solutions that'll make your wave stretch perfectly across any screen.

Fixed SVG Solution (Scalable & True-to-Design) #

The main issue with your original code was the misspelled viewBox attribute (SVG is strict about camel case here). Here's the corrected, full-width version:

<svg viewBox="0 0 100 25" width="100%" height="auto">
  <path fill="#9EAFFD" d="M0 30 V12 Q30 17 55 12 T100 11 V30z" />
</svg>

• What changed:
  • Fixed viewbox → viewBox to enable proper scaling
  • Added width="100%" height="auto" to force the SVG to fill its container's width while maintaining aspect ratio
  • The viewBox defines the "canvas" coordinates, so your wave shape stays consistent no matter how big or small the screen is

If you want to tweak the wave's curve or height, just adjust the values in the d path string. For example, changing V12 to V8 will make the wave taller.

Pure CSS Solution (No External Assets) #

If you'd rather skip SVG entirely, here are two CSS approaches to create full-width waves:

Method 1: Simple Curved Wave with Clip-Path #

This uses a polygon clip path to create a smooth wave effect. Adjust the values to match your desired curve:

.wave-section {
  width: 100%;
  height: 180px;
  background-color: #9EAFFD;
  /* Tweak the polygon coordinates to adjust wave shape */
  clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
}

Method 2: Multi-Layered Wave with Pseudo-Elements #

For a more organic, layered wave, use pseudo-elements with border-radius. This works great if you want the wave to blend into a background color:

.wave-container {
  position: relative;
  width: 100%;
  height: 220px;
  background-color: #9EAFFD;
}

/* Bottom wave that blends into the background */
.wave-container::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #ffffff; /* Match your page's background color */
  border-radius: 50% 50% 0 0;
}

/* Optional inner wave for depth */
.wave-container::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 35px;
  background: #9EAFFD;
  border-radius: 50% 50% 0 0;
}

Both solutions will give you a full-width wave that adapts to any screen size. The SVG route is perfect if you need to match a precise design from your PSD, while CSS is ideal for lightweight, customizable waves without extra file requests.

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