我想填写<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>
对于这样的形状，您可以使用SVG图案并填充图案的矩形宽度，如下例所示：
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>