CSS 3 or svg wave in a background

Question

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

布局图像：

我需要白顶背景的波浪

Answer 1

不太像Fiddle

<svg width="500" height="200">
    <path d="m 0 100 l 40 0 q 50 0 60 10 100 80 250 0,100 -20 155 0 v 200 h -500 z" stroke="red" fill="orange"/>
</svg>

Answer 2

我稍微改进了 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绘制三次贝塞尔曲线，第一个点坐标为第一个手柄，第二个第二个手柄，第三个为终点。

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

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

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

CSS 3 or svg wave in a background

CSS 3 or svg wave in a background

css

svg

background

css-shapes