полная ширина волны в CSS, SVG

Question

Я создаю веб-сайт, у которого есть часть, которая находится в форме волны, как это: PSD

В настоящее время я использую изображение PSD, PNG, для размещения на сайте, но я бы хотел, чтобы волна имела полную ширину экрана, мой результат

Мне бы хотелось CSS-решение, поэтому я немного исследовал, и talez возможен с использованием SVG, однако мне не удалось создать

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

Answer 1

Чтобы получить несколько экземпляров волн, вы можете использовать pattern, в котором будет одна волна.

Мы выбираем ширину и высоту паттерна, равные ширине и высоте одной волны width = "100" и height = "25"

Заполните прямоугольную область с pattern. С viewBox = "0 0 100 25" шаблон подойдет один раз.

<svg  viewBox="0 0 100 25">
 <defs>
      <pattern id="Wave"
             x="0" y="0" width="100" height="25"
             patternUnits="userSpaceOnUse" >
            <path d="M0 25 0 6C20 9 38 11 55 7 72 4 87 4 100 6l0 19z" id="path4" fill="#9eaffd"/>
      </pattern>
   </defs>
  <rect width="100%" height="100%" fill="url(#Wave)" />
</svg> 

Чтобы получить 4 волны, вам нужно, чтобы рисунок соответствовал длине в четыре раза. Для этого увеличьте width в четыре раза - viewBox = "0 0 400 25"

<svg  viewBox="0 0 400 25">
 <defs>
      <pattern id="Wave"
             x="0" y="0" width="100" height="25"
             patternUnits="userSpaceOnUse" >
            <path d="M0 25 0 6C20 9 38 11 55 7 72 4 87 4 100 6l0 19z" id="path4" fill="#9eaffd"/>
      </pattern>
   </defs>
  <rect width="100%" height="100%" fill="url(#Wave)" />
</svg>

Answer 2

1. Вам нужно добавить оболочку для SVG
2. Добавить preserveAspectRatio = "none" к каждому элементу SVG
3. Добавление абсолютного положения со 100% шириной и высотой к элементам SVG

Как и следующее:

<div class="svg-wrapper">
  <svg viewbox="0 0 100 25" preserveAspectRatio="none">
    <path fill="#9EAFFD" d="M0 30 V12 Q30 17 55 12 T100 11 V30z" />
  </svg>

CSS

body{
  padding:0;
  margin:0;
}
.svg-wrapper{
  display:block;
  position: relative;
  width: 100%;
  height: 80px;
  background: rgba(0,0,0,0.1)
}
.svg-wrapper svg{
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height: 100%;
}