CSSセクション区切り線ジェネレータ
装飾的なセクションエッジ区切り線を生成します — 斜め、曲線、三角形、矢印/分割、本ページカール、または波状クラウド — 選択した形状と色から。SVG、CSS背景画像スニペット、または貼り付け可能なHTMLブロックをコピーします。ブラウザで完全に実行されます。
入力
対角線エッジがどのくらい低くなるか、高さの割合で表示します。
寸法
変形
塗りつぶし
背景
出力
区切り線がここに表示されます。
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-section-divider-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"shapeType": "slant",
"slantDepth": "50",
"width": "1200",
"height": "200",
"fillColor": "#464aff",
"fillOpacity": "100",
"bgColor": "#f5f5f5"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-section-divider-generator` tool (CSS Section Divider Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-section-divider-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSSセクション区切り線ジェネレータ — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
CSSセクション区切り線ジェネレータは、モダンなランディングページのヒーロー
セクション、フッター、およびコンテンツブロックを分割する、装飾的なセクション
エッジを構築します — 斜め、単一曲線、三角形、矢印/分割ノッチ、本ページ
コーナーカール、または波状クラウドの行。結果は3つの方法で提供されます：
生のSVG、CSS background-image スニペット、および貼り付け可能な
HTML ブロック。すべての形状は実際のベクトル幾何学であるため、任意の
サイズで鮮明に保たれます。
使用方法
- 形状 を選択します — 斜め、曲線、三角形/ウェッジ、矢印/分割、本ページ カール、またはクラウド。
- その形状独自のコントロールを調整します（斜めの深さ、曲線の深さ、ピーク 位置と高さ、ノッチの深さ、カールサイズ、またはバンプ数と高さ）。
- キャンバスの 幅 と 高さ を設定します。
- 形状を 垂直に反転 します（セクションの底部に配置する代わりに上部に ぶら下げるため）または 水平に反転 します（斜め、ピーク、本ページ カールを反対側にミラーするため）。
- 塗りつぶし色 と不透明度、および 背景色 を選択します。必要な出力を コピーします — プレビューは操作時に更新されます。
3つの出力
- SVGコード — マークアップに直接ドロップするか、
.svgファイルとして保存 できる自己完結型の<svg>。背景色は<rect>として焼き込まれているため、 ファイルはどこで開いても同じように見えます。 - CSS背景 —
background-image: url("data:image/svg+xml,…")ルールに URL エンコードされた同じ形状で、装飾用区切り線として任意の要素に添付する準備 ができています。 - HTMLスニペット — インラインSVG付きの
<div>ラッパー。スタイルシートに 触れずにページに貼り付けられます。
セクションの下部ではなく上部に区切り線を配置するにはどうすればよいですか？
垂直に反転 を有効にします。デフォルトでは、すべての形状はボックスの下の 端に配置されるように描かれています。反転により、同じ形状が上の端から垂直に ぶら下がるように塗りつぶされた領域が鏡像されます — 別の「位置」設定は必要 ありません。
これらの形状はぼやけずにスケーリングできますか？
はい。すべては preserveAspectRatio="none" を持つベクトルパスデータであるため、
形状は配置した任意の幅に合わせて伸びます — 電話からウルトラワイドモニターまで —
品質損失なしで。
波状の区切り線が必要な場合はどうしますか？
このツールは直線および曲線の形状ファミリーをカバーしています。波状、波打つ区切り 線 — サイン、ジグザグ、丸い丘、層状波、または有機的な斑点 — には、 SVG波ジェネレータ を使用してください。これは同じ SVG/CSS/HTML出力契約上に構築されたシスター ツールです。
プライバシー
ジェネレータはブラウザで完全に実行されます。色、寸法、その他すべての設定は デバイスに留まります — 何もアップロードされず、サーバーには形状は送信されません。