SVG と CSS を使用してレスポンシブな波形を作成する方法

SVG と CSS を使用して波状の形状を作成する

質問: CSS を使用して画像のような波状の形状を作成するにはどうすればよいですか?提供されていますか?

答え:

SVG と CSS を組み合わせることによって、目的の波状の形状を実現できます。包括的なアプローチは次のとおりです。

まず、SVG 要素を作成し、wave のパスを定義します。このパスは、シェイプの曲線と輪郭を制御します。以下の例では、パスは点 (0, 100) から点 (500, 100) までの波を形成します。

<svg viewbox="0 0 500 500" preserveaspectratio="xMinYMin meet">
  <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z"></path></svg>

次に、SVG を保持するコンテナー要素を作成します。このコンテナにより、波形の応答性が維持されます。

<div class="container">
  <svg viewbox="0 0 500 500" preserveaspectratio="xMinYMin meet">
    <path d="M0,100 C150,200 350,0 500,100 L500,00 L0,0 Z"><p>最後に、CSS を使用してコンテナのスタイルを設定し、応答性を高め、SVG を配置します。コンテナーの padding-bottom を 100% に設定し、位置を相対に設定すると、コンテナーの利用可能な高さを埋めながら SVG のアスペクト比を維持できます。</p><pre class="brush:php;toolbar:false">.container {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  vertical-align: middle;
  overflow: hidden;
}

このアプローチにより、SVG 波形の応答性が保証されます。 、コンテナの寸法に関係なく、望ましい形状を維持します。