直接用 clip-path 可实现无需 JS、不改 HTML、不依赖图片编辑的形状裁剪，但需区分 CSS 函数（如 polygon、circle）适用场景与 SVG 配合的必要性。
直接用 clip-path 就能实现，不需要 JS、不改 HTML 结构、也不依赖图片编辑——但必须清楚哪些形状能直接写，哪些得靠 SVG 配合，否则裁出来是空的或错位的。
用 polygon() 写三角形、梯形、斜角这些常见自定义形状
这是最常用也最容易上手的方式，适合静态、规则或半规则轮廓。坐标系以元素左上角为 0% 0%，右下角为 100% 100%，支持百分比、像素、calc() 混用。
- 三角形（底边在下）：
clip-path: polygon(50% 0%, 100% 100%, 0% 100%) - 右上角斜切矩形：
clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%) - 注意顶点顺序：顺时针或逆时针都行，但不能交叉，否则部分区域可能意外显示
- 百分比值基于元素自身的
border-box，不是视口或父容器 - 别用小数坐标如
0.5px—— Safari 对 sub-pixel 支持不稳定，容易出现 1px 锯齿或漏显
用 circle() 和 ellipse() 做居中/偏心圆形裁剪
看似简单，但半径单位和圆心定位容易出错。尤其当元素宽高不等时，50% 的含义会变。
-
clip-path: circle(50%)→ 半径 = 元素宽高中的较小值 × 0.5，圆心默认居中 -
clip-path: circle(60px at 20px 30px)→ 圆心固定在距左 20px、距上 30px 处，半径 60px（超出元素边界的部分会被裁掉） -
clip-path: ellipse(40% 60% at center)→ 水平半轴 40%，垂直半轴 60%，圆心居中；若元素是正方形，结果接近圆形；若宽 > 高，椭圆会横向拉伸 - 避免写
circle(100%)—— 它只在正方形元素里才刚好覆盖全图，长方形里会变成“内切圆”，上下或左右留白
复杂图形（星形、波浪边、手绘路径）必须用 SVG <clippath></clippath> 引用
clip-path: path("M...") 看起来方便，但 Safari 直到 15.4 才开始支持，且字符串需手动转义双引号、路径精度受 CSS 解析限制。生产环境优先选 SVG 方式。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
-
<svg></svg>必须内联（不能外链），且<clippath></clippath>要放在<defs></defs>里 - ID 必须唯一，引用写成
clip-path: url(#star)，注意括号里是哈希 ID，不是类名 - 图片必须用
<img>标签加载，不能是background-image—— 后者不响应 SVG clipPath - SVG
viewBox默认坐标系是用户单位，不是百分比；若想让星形随元素缩放，建议设viewBox="0 0 100 100"，再在<path>中用 0–100 的整数坐标 - 示例片段：
<svg width="0" height="0" style="position: absolute"> <defs> <clipPath id="wave"> <path d="M0,0 L100,0 Q80,20 60,0 T20,0 L0,0 Z"></path> </clipPath> </defs> </svg>然后在 img 上加clip-path: url(#wave)
动画、响应式与兼容性避坑要点
clip-path 支持 transition 和 @keyframes，但动画时形状类型必须一致（比如 polygon → polygon），否则会跳变或失效。另外，它不解决老浏览器问题。
- IE 完全不支持，Edge ≤ 18 也不支持 —— 若需兜底，得用 Canvas 或降级为
overflow: hidden+ border-radius - 动画 polygon 时，顶点数量必须相同，否则浏览器无法插值；例如从三角形动到四边形会失败
- 响应式场景下，慎用固定像素值（如
polygon(0 0, 100px 0, ...)），推荐统一用百分比或配合container queries动态计算 -
clip-path不影响布局流，裁剪后元素仍占原始空间 —— 如果希望视觉收缩同时影响周围布局，得额外用transform: scale()或 JS 测量裁剪后尺寸 - 移动端 Safari 对
clip-path的 GPU 加速不如 Chrome 稳定，复杂动画可能掉帧，建议用will-change: clip-path提前提示渲染引擎
真正麻烦的不是写对一个形状，而是让同一套 clip-path 在不同宽高比、不同缩放层级、不同设备上都保持预期比例和位置 —— 这时候 SVG <clippath></clippath> 的 viewBox 控制力就比纯 CSS 函数强得多。
