Wave Divider（波形境界線）CSSジェネレーター
セクションの境界線を波形に変更するツールです。シンプルな整数座標のパスを生成し、サイトデザインに躍動感をプラスします。
プレビュー
<!-- 1. セクション -->
<div class="box-section">
<span class="section-title">Section Title</span>
</div>
<!-- 2. 境界線デザイン -->
<div class="custom-shape-divider">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="{{path_val}}" class="shape-fill"></path>
</svg>
</div>/* 1. セクションのスタイル */
.box-section {
width: 100%;
height: 300px;
background: {{color}};
display: flex;
align-items: center;
justify-content: center;
}
.box-section .section-title {
display: block;
color: #fff;
font-weight: bold;
font-size: 2rem;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
/* 2. 境界線デザインのスタイル */
.custom-shape-divider {
width: 100%;
overflow: hidden;
line-height: 0;
transform: {{flip_h_style}} {{invert_style}};
}
.custom-shape-divider svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: {{height}}px;
}
.custom-shape-divider .shape-fill {
fill: {{color}};
}機能・使い方
- Webサイトのセクション間を美しく区切るための波型図形を生成します。
- 導入方法: 生成されたHTMLを境界線に配置し、CSSを適用するだけで完了です。
- レスポンシブ対応: 画面幅に合わせて図形が自動的に伸縮します。
- 反転ボタンを使って、図形の向きを上下左右に変更できます。
ポイント
生成される要素は通常のボックス要素（div）です。セクションの最上部や最下部に配置することで、隣り合う背景色の境界を滑らかな曲線に変えることができます。
背景色と同色を指定したり、上下反転を使用したりすることで、さまざまなレイアウトパターンに対応可能です。
