BACKGROUND & DECOR
斜切分隔Diagonal Divider
区块之间用一条斜线切割，比波浪硬朗、比直线有动感。
效果预览
上方区块（白色）
下方区块（深色）· 斜切上边缘
适合用在哪
科技官网、运动品牌、B2B 产品页的区块过渡。
容易踩的坑
- 倾斜角超过 6° 时，在 1440px 宽屏上斜边会吃掉 150px 以上垂直空间。
- clip-path 斜切后没给内容额外 padding，标题被斜边裁掉一角。
- 连续斜切方向随意变化，没有 Z 字或统一节奏，页面显得凌乱。
设计提示词 · Prompt
斜切分隔（Diagonal Divider）：下个区块顶部用 clip-path:polygon(0 100%, 100% 0, 100% 100%) 或一个旋转的色块伪元素做斜边，倾斜角 2-6°（太陡会浪费空间）。整页连续多个斜切区块时方向要交替（/ /）形成 Z 字节奏，或统一方向形成"下楼梯"动势。斜切区内的内容要反向倾斜或保持水平（通常保持水平，只斜背景）。与全出血区块组合使用——斜切的全出血色带是 B2B 官网的经典章节分隔。
Diagonal Divider: Give the top of the next section a slanted edge with clip-path: polygon(0 100%, 100% 0, 100% 100%) or a rotated colored pseudo-element, at a 2-6° angle (steeper wastes space). When several diagonal sections run consecutively, alternate the direction (/ \ /) for a Z-shaped rhythm, or keep one direction for a "descending stairs" momentum. Content inside a diagonal section should either counter-tilt or stay horizontal (usually horizontal — only the background is slanted). Combine with full-bleed sections — a slanted full-bleed color band is the classic chapter divider for B2B sites.
常见搭配
同一页面里经常和「斜切分隔」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s s--abs d-diabg">
<div class="d-diabg__top">上方区块（白色）</div>
<div class="d-diabg__bottom">
<span class="d-diabg__cap">下方区块（深色）· 斜切上边缘</span>
</div>
</div>