CSSで波のような背景を作りたい

Question

添付のような波の背景を作りたいのですが、CSSのboreder-radiusだけではうまく作れませんでした。
また、https://svgwave.in/などの波背景を作るサイトでも試してみたのですが、思ったような形にならず。。

こういった波の背景を作る方法は、上記の方法以外にもあるでしょうか？

Answer 1

もっと良い方法があるかもしれませんが、
PowerPoint をお持ちであれば、ベジェ曲線を SVG 形式で保存できるようです。

■ 表示結果

Comments

[hiroaki_]

すいません、私の記載の仕方が悪かったのですが、赤枠で囲んだ後ろのグレー背景を表現したいのですが、いい方法はあるでしょうか？？

[cx20]

カーブに沿ってグラデーションがかかった波を表現したい、ということでしょうか？

[hiroaki_]

ご連絡遅くなりました。はい、グラデーションのかかった波の背景を作りたいです。
また、そこの部分から背景色を分けていきたいです。。

[cx20]

Inkscape は使ったことが無いのであまりアドバイスできないのですが、
ググったところ波に沿ったグラデーションを設定する記事がみつかりました。参考情報まで。
http://blog.livedoor.jp/maikka_gogo/archives/1043883771.html

[hiroaki_]

ありがとうございます！

Answer 2

Inkscapeも安定してきていますね

• Draw Freely | Inkscape