SVG / 區段

SVG形狀分隔線：區塊邊緣與圖層

產生8種SVG區塊分隔線形狀，可調整振幅、頻率、高度、翻轉、反轉填色，以及最多3個圖層。預覽區塊並複製SVG、CSS和HTML。

SVG形狀分隔線：區塊邊緣與圖層: 選擇波浪、曲線、傾斜、三角形、箭頭、鋸齒、雲朵或山形邊緣，調整高度、振幅和重複次數，翻轉或反轉形狀，並堆疊最多3個圖層。分隔線會延展至任何頁面寬度；您可以複製SVG、定位CSS或現成的HTML區塊。全程在瀏覽器中於本機執行，檔案不會上傳至伺服器。

分類: 開發者工具
使用次數: 在瀏覽器中
費用: 免費・免註冊
可用狀態: 可立即使用

SVG造型分隔線本機處理

全程在瀏覽器中執行

區段預覽

換個景色。

兩個區段之間的造型邊緣。

SVG程式碼

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg>

CSS定位

.section { position: relative; overflow: hidden; padding-bottom: 160px; }
.section-divider { position: absolute; left: 0; bottom: 0; width: 100%; height: 160px; pointer-events: none; }
.section-divider svg { display: block; width: 100%; height: 100%; }

HTML區段

<section class="section">
  <div class="section-divider" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg></div>
</section>

使用下一個區段的背景色彩以形成連續邊緣。將底部分隔線移到頂部時，請垂直翻轉。

封閉路徑與座標

SVG 2 定義了closepath與三次曲線路徑指令：https://www.w3.org/TR/SVG2/paths.html。viewBox會將這些座標對應至視區：https://www.w3.org/TR/SVG2/coords.html

形狀的來源

波浪形狀使用與SVG Wave Generator和SVG Blob Generator相同的平滑曲線；其他輪廓則由簡單公式繪製。不包含第三方美術作品，因此產生的結果可由你自由使用。

使用方式

選擇形狀，調整振幅、頻率和高度。
設定圖層、不透明度和顏色，接著選擇區塊邊緣及任何翻轉選項。
複製SVG、定位CSS和區塊HTML，或下載SVG。

隱私與限制

形狀產生與下載完全在瀏覽器中執行。

常見問題

如何讓邊緣與另一個區塊自然銜接？

使用該區塊的背景色作為分隔線填色。CSS會預留分隔線所需的空間，並將分隔線絕對定位在選定的邊緣。

這和波浪工具有什麼不同？

這項工具增加了另外7種形狀、反轉功能和區塊HTML。現有的SVG Wave Generator提供隨機波浪及其他波浪專用控制項；SVG Blob Generator則會產生獨立的有機形狀。

反轉功能有什麼作用？

反轉會讓路徑朝向頂部而不是底部閉合，同時維持分隔邊緣的位置。垂直翻轉則會反射整個形狀。

免費工具・使用在瀏覽器中次・免註冊