これは体験版です。設定を自由にさわって、どんな境界線が作れるか試せます。作った境界線のコード取得は購入者特典版でできます。

〰️ 境界線デザイン工房(体験版)

ページのセクション境界を、動く波・斜め線・下へ差し込む吹き出し三角にする。出力はSVG+CSSをひとまとめにした自己完結コード。

プレビュー

UPPER SECTION

上のセクション

この背景色が、波の上側になります。

LOWER SECTION

次のセクションへ

境界がまっすぐではなく、ゆっくり動く波になります。

出力コードをそのまま実行し、画面いっぱいの境界と動きを最終確認します。

📋 出力(カスタムHTMLブロックに貼るコード)

体験版のため、コードの生成・コピー・保存はできません。実際に使えるコード出力は購入者特典版でご利用いただけます。
体験版のため、コピー・保存はできません
体験版のため、コードは表示されません。購入者特典版で実際のコードを確認・コピーできます。
単色背景では2つのグループの間へ置きます。写真・模様背景へめり込ませる場合は「透明(写真用)」を選び、コードを下のグループの先頭へ入れます。
写真・模様の場合:下のグループを全幅背景にし、境界コードをグループ内の一番上へ置きます。「上へ接続」をONにし、「上の消す余白」を24pxなど実際の隙間に合わせて調整します。0pxでは隙間は消えません。「下へ接続」はOFFで使います。