• TOP
  • 記事一覧
  • 【CSS】背景をSVGのペジェ曲線でゆるやかなカーブ線切り抜く方法

【CSS】背景をSVGのペジェ曲線でゆるやかなカーブ線切り抜く方法

更新日：2025/03/28

手順

  1. Figmaで波線を作成
  • ペンツールで波形を描きます
  • SVG形式でエクスポートします
  1. SVGコードを入手
  • エクスポートしたSVGからパスコードを取得します
  1. HTMLに実装
<section class="about_hero">
  <div class="about_hero__container">
    <h1>タイトル</h1>
  </div>
  <svg xmlns="..." viewBox="0 0 1440 240" preserveAspectRatio="none" class="wave">
    <path fill="#ffffff" d="M0,240 C82,130..."></path>
  </svg>
</section>
  1. CSSで位置調整
   .about_hero {
     background: url(...) center/cover;
     height: 20vh;
     position: relative;
     overflow: hidden;
   }

   .wave {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 50px;
   }

実装のポイント

  • viewBoxサイズの適切な設定
  • preserveAspectRatio=”none”の指定
  • fill色の調整

WordPressで投稿する際は、コードブロックを使用すると綺麗に表示されます。

新規記事

すべてを見る
人気記事ランキング
ピックアップ記事
話題のキーワードから探す