html - 用波浪边框 SVG 路径填充一个 div

Question

我要填写 <div>使用颜色并向边框添加阴影，但我的代码正在执行此操作。我实际上需要它，如图所示。

<svg height="125" width="1349">
  <path d="M -35 100 s 35 50 75 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="none" />
  <path d="M 40 100 s 75 -125 150 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="rgb(255, 195, 56)" />
  <path d="M 190 100 s 35 50 75 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="none" />
  <path d="M 265 100 s 75 -125 150 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="rgb(255, 195, 56)" />
  <path d="M 415 100 s 35 50 75 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="none" />
  <path d="M 490 100 s 75 -125 150 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="rgb(255, 195, 56)" />
  <path d="M 640 100 s 35 50 75 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="none" />
  <path d="M 715 100 s 75 -125 150 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="rgb(255, 195, 56)" />
  <path d="M 865 100 s 35 50 75 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="none" />
  <path d="M 940 100 s 75 -125 150 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="rgb(255, 195, 56)" />
  <path d="M 1090 100 s 35 50 75 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="none" />
  <path d="M 1165 100 s 75 -125 150 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="rgb(255, 195, 56)" />
  <path d="M 1315 100 s 35 50 75 0" stroke="rgb(255, 195, 56)" stroke-width="5" fill="none" />
  Sorry, your browser does not support inline SVG.
</svg>

Answer 1

对于这样的形状，您可以使用 svg pattern并填充一个矩形宽度的图案，如下例所示:

html,body{margin:0;padding:0;}
div{
  background: url('http://i.imgur.com/qi5FGET.jpg');
  background-size:cover;
  overflow:hidden;
}
svg{display:block;}

<div>
  <h1>title</h1>
  <p>whatever content<br/>with several lines</p>
  <svg viewbox="0 0 60 10">
    <pattern x="-7.5" id="waves" patternUnits="userSpaceOnUse" width="10" height="10">
      <path d="M0 10 V5 Q2.5 2.5 5 5 T10 5 V10" fill="#FFC338" />
    </pattern>
    <rect x="0" y="0" width="60" height="10" fill="url(#waves)"/>
  </svg>
</div>