斜切區段分隔
多種造型的區段交界分隔：斜切、波浪、鋸齒、弧形
放在兩個底色不同的區段之間，以 SVG 造型（斜切、波浪、鋸齒、弧形）做出自然的交界過渡，支援垂直翻轉、水平鏡射與雙色層疊，進入視窗時帶有柔和的上滑淡入動畫。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
80
0.35
<DiagonalSectionDivider />
安裝
npx shadcn@latest add https://webberui.com/r/diagonal-section-divider.json或在 components.json 設定 registries 後，改用 @webberui/diagonal-section-divider 安裝。
安裝依賴後，從 registry JSON（/r/diagonal-section-divider.json 的 files[0].content）複製 diagonal-section-divider.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
分隔的 bg-* 設為「上一個區段」的底色、text-*（即 currentColor 填色）設為「下一個區段」的底色，交界即可完全無縫：
import { DiagonalSectionDivider } from "@/components/ui/diagonal-section-divider";
<section className="bg-neutral-100 dark:bg-neutral-900">上一個區段</section>
<DiagonalSectionDivider
variant="wave"
layered
height={72}
className="bg-neutral-100 text-neutral-900 dark:bg-neutral-900 dark:text-neutral-100"
/>
<section className="bg-neutral-900 dark:bg-neutral-100">下一個區段</section>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
variant | "slant" | "wave" | "zigzag" | "curve" | "slant" | 分隔造型：斜切、波浪、鋸齒、弧形 |
color | string | "currentColor" | 造型填色，通常設為下一個區段的底色；預設 currentColor，可用 text-* class 控制以支援深淺色模式 |
height | number | 80 | 分隔區塊的高度（px） |
flip | boolean | false | 垂直翻轉：造型改為向下「咬」，適合放在區段頂部 |
flipX | boolean | false | 水平鏡射：反轉斜切、波浪等不對稱造型的方向 |
layered | boolean | false | 是否加上第二層向上偏移的色塊，形成雙色層疊的深度感 |
layerColor | string | 同 color | 第二層的填色（以 layerOpacity 呈現半透明） |
layerOpacity | number | 0.35 | 第二層透明度（0–1） |
layerOffset | number | 12 | 第二層向上偏移量（以 viewBox 0–120 座標為單位） |
animated | boolean | true | 進入視窗時是否播放上滑淡入動畫 |
className | string | — | 透傳到外層容器，常在此設定背景色與文字色 |
可及性
- 分隔為純裝飾元素，外層容器標記
aria-hidden="true"與role="presentation"，輔助科技會完全略過 - 使用者系統開啟「減少動態效果」時，進場動畫時長歸零，直接呈現最終狀態
- 容器加上
pointer-events-none，不會攔截點擊或成為鍵盤焦點 - 造型以向量 SVG 繪製（
preserveAspectRatio="none"），任意寬高縮放皆不失真、不含文字內容