用 clip-path 实现真实斜切形状，适合需精确裁剪、响应式或加阴影的场景；用 linear-gradient 实现视觉斜切效果，更轻量、兼容性好、性能高，适合装饰性需求。
直接用 clip-path: polygon() 或 background-image: linear-gradient() 就能实现，不用 JS、不依赖伪元素、不 hack 溢出。关键看你要的是「真实斜切形状」还是「视觉斜切效果」——前者用 clip-path，后者用渐变更轻量、更可控。
clip-path 实现真实斜角裁剪
适合需要精确控制可见区域、响应式适配、或后续要加阴影/边框的场景。浏览器支持已很稳（Chrome 57+、Firefox 54+、Safari 15.4+、Edge 79+）。
-
clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%)是经典右下斜切：前两点是左上到右上，第三点往左缩 15%，第四点往上缩 15%，形成斜边 - 百分比值可换成
calc(100% - 20px)，实现固定像素斜切，比如clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%) - 若斜边要从左上出发，改用
polygon(0 0, 100% 20%, 100% 100%, 0 100%)，第二点横坐标 100%、纵坐标 20%，就是向右下倾斜的起点 - 注意父容器别设
overflow: hidden，否则clip-path可能被截断；也别忘了box-sizing: border-box，避免 padding 影响坐标计算
linear-gradient 实现视觉斜切背景
本质是用一层带透明/实色切换的渐变“盖”在图片或纯色上，靠层叠营造斜切感。兼容性更好（IE10+），性能更高，且天然支持响应式调整。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
background-image: linear-gradient(140deg, transparent 70%, #4a00e0 70%), url(bg.jpg)—— 第一个参数是角度，140deg 是从左下指向右上；70% 是透明转实色的硬切点 - 角度越小（如 120deg），斜边越平；越大（如 160deg），斜边越陡；百分比越小（如 60%），色块越窄，图片露出越多
-
background-position: right center很关键：确保图片锚点在右侧，否则斜切线会随图片平移而偏移 - 千万别漏
background-repeat: no-repeat，否则渐变会平铺，斜切线变成一排锯齿
常见错误和兼容性坑
这两个方案看着简单，但实际落地时最容易栽在三处：
立即学习“前端免费学习笔记（深入）”；
- 用
clip-path时写了clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)却没生效 → 检查是否忘了给元素设position: relative或父级有overflow: hidden - 用渐变时斜切线模糊或发虚 → 大概率是用了
background-size: 100% 100%导致拉伸失真，必须用cover或contain - 在 Safari 上
clip-path偶尔失效 → 加一行-webkit-clip-path兜底，值完全一样即可 - 移动端斜切比例失调 → 别死守 70%，用媒体查询微调，比如
@media (max-width: 768px) { background-image: linear-gradient(135deg, transparent 60%, #4a00e0 60%) }
真正难的不是写对那行 clip-path 或 linear-gradient，而是想清楚：这个斜切是装饰性的（渐变足矣），还是结构性的（必须真实裁剪形状）。选错方案，后期改起来反而更费劲。
