用clip-path: polygon()可实现真实顶部斜角裁剪，需至少4个闭合顶点、配合position: relative或overflow: hidden生效，背景/文字/阴影同步裁剪；若仅需视觉效果，则用linear-gradient更轻量兼容。
直接用 clip-path 就能实现，不用 JS、不套伪元素、也不靠 transform 强行歪斜——关键看你要的是「真实裁剪」还是「视觉错觉」。
clip-path: polygon() 实现真实顶部斜角裁剪
顶部横幅（比如 <header> 或 banner div）需要真正把左上/右上角切掉，让背景图、阴影、文字都同步被裁，就用 clip-path: polygon()。顶点必须顺时针或逆时针闭合，且至少 4 个点。
-
clip-path: polygon(0 0, 100% 0, 100% 90%, 15% 100%, 0 100%)是经典「右上斜切」：第三点 y=90% 把右上角往下压，第四点 x=15% 把左下角往右拉，形成从右上向左下的斜边 - 想改成「左上斜切」，用
clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%)—— 第二点 x=85% 把右上角往左缩，斜边从左上出发向右下延伸 - 别忘了给元素加
position: relative或overflow: hidden，否则裁剪可能不生效；也别设overflow: hidden在父容器上，否则会截断裁剪区域 - 百分比值可换成
calc()实现固定像素斜切，比如calc(100% - 32px)，适配设计稿的 32px 斜切高度
linear-gradient 模拟顶部斜角视觉效果
如果只是要「看起来像斜切」，比如横幅底色是纯色或渐变，不需要裁剪内容本身，background-image: linear-gradient() 更轻量、兼容性更好（IE10+ 支持），且天然响应式。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
background-image: linear-gradient(140deg, #fff 70%, transparent 0)：角度 140deg 控制斜边倾斜方向（越小越平，越大越陡），70% 是颜色硬切位置，决定斜边在横幅中的纵向占比 - 要叠加在图片上，得用多层 background：
background: url(bg.jpg), linear-gradient(140deg, rgba(255,255,255,0.8) 70%, transparent 0) - 注意：渐变层默认从元素左上角开始铺，若横幅高度不固定，斜边位置会漂移；建议配合
background-size: cover或明确设置 height - 移动端慎用固定像素角度，优先用 deg + 百分比组合，避免在小屏上斜边跑出可视区
常见错误：横幅斜切后内容消失或错位
这不是代码写错了，而是盒模型和渲染顺序没理清。
立即学习“前端免费学习笔记（深入）”；
- 现象：
clip-path加了但背景还在、文字被裁掉——说明背景没设在被裁剪的元素上，而是设在了父容器；必须确保background、border、box-shadow都作用于该元素自身 - 现象：斜边位置不准、随窗口缩放乱跳——用了 px 单位定义
clip-path顶点，应全用百分比或vw/vh，例如clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vh), calc(100% - 4vh) 100%, 0 100%) - 现象：Firefox 下正常，Safari 里斜边锯齿明显——Safari 对
clip-path的抗锯齿支持较弱，可加transform: translateZ(0)触发硬件加速，或改用渐变方案 - 现象：横幅里放了
<h1>文字，斜切后文字被裁一半——clip-path裁的是整个盒模型，文字无法“逃出”裁剪区；如需文字完整显示，得把文字提一层到兄弟元素，或用z-index+position: relative叠在上面
真正难的不是写出那行 clip-path，而是判断这个斜角到底要不要参与布局、要不要带阴影、要不要响应滚动——这些决定了你该用裁剪还是渐变，以及怎么安排 DOM 层级。
