背景中的 CSS 3 或 svg 波浪

Question

如何在透明图像背景上构建波浪？

布局图像:

我需要白色顶部背景中的波浪。

Answer 1

我稍微改进了 akshay 的回答版本。这包括两个单独的选项。

选项 1

如果不需要保留宽高比，则曲线将随宽度变化。

http://jsfiddle.net/f6n73avk/2/

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="100" width="100%" viewBox="0 0 90 20" preserveAspectRatio="none">
    <path d="M0 5 H5 C25 5 25 20 45 20 S65 5 85 5 H90 V-5 H0z" fill="black" stroke="transparent"/>
</svg>

选项 2

如果必须保留宽高比，那么我们必须对 svg 元素的高度和宽度使用相同的单位值。

http://jsfiddle.net/o1eghm7v/1/

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 90 20" >
    <path d="M0 5 H5 C25 5 25 20 45 20 S65 5 85 5 H90 V-5 H0z" fill="black" stroke="transparent"/>
</svg>

看到这里我将宽度和高度都设为 100%。要更改颜色，您必须更改 fill 属性的值。
此外，我使用了绝对路径命令，因为它们更易于编辑。

解释

M - 命令将绘图点移动到其后指定的坐标，或 0,5(SVG 坐标系)

H 从当前点(0,5)到指定的X坐标绘制水平线

C绘制三次贝塞尔曲线，第一个点坐标为第一个 handle ，第二个第二个 handle ，第三个为终点。

S画了一个三次贝塞尔曲线，但它的第一个句柄是最后一个C命令的最后一个句柄关于最后一个C的终点的反射(reflect)。

V 绘制垂直线到指定的 Y 坐标。

Z闭合路径，即从当前点到最后M点画一条直线。