CSS如何绘制复杂几何图形_利用clip-path属性进行裁切

作者：袖梨 2026-07-24

<p>clip-path 支持 inset()、circle()、ellipse()、polygon() 和 path() 五种裁切图形，其中 polygon() 适合顶点明确的多边形（如正六边形），path() 借助贝塞尔曲线实现圆滑形状（如心形），但 Firefox 需 -webkit- 前缀且不支持 arc 指令；二者均非绘图工具，仅裁切元素矩形区域。</p>

clip-path 能画出哪些“图形”，和 SVG path 有什么区别

clip-path 不是绘图工具，它只做裁切——把元素原本的矩形区域按指定形状“抠”出一个透明洞，背后内容透出来。能实现的图形取决于你给的路径描述，inset()、circle()、ellipse()、polygon() 和 path() 这五种函数里，真正支持复杂几何（比如星形、心形、不规则多边形）的是 polygon() 和 path()。

polygon() 适合顶点明确、坐标可数的图形，比如六边形、平行四边形、锯齿边框；path() 支持贝塞尔曲线，才能做出圆滑过渡的形状（如花瓣、流线型徽标）。但注意：path() 在 Firefox 中需要加 -webkit- 前缀才能生效，且不支持 CSS 变量插值，路径字符串必须硬编码或用 JS 动态写入。

用 polygon() 绘制六边形：坐标怎么算才不歪

六边形看似简单，但直接手写六个点容易因角度偏差导致上下不对称或边不等长。最稳的方式是用单位圆坐标生成：6 个点均匀分布在 360° 上，起始角建议设为 -30°（让顶部朝上），再乘以半径。

假设容器宽高都是 200px，想居中绘制边长为 100 的正六边形，可用这组坐标：polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)
不要用像素值写死坐标（如 100px 0px），否则响应式失效；百分比基于元素自身宽高，更可控
如果发现六边形被“压扁”，检查父容器是否设置了 aspect-ratio 或图片/内容拉伸了高度——polygon() 坐标是相对于盒模型的，不是视口

path() 画心形时，Chrome 显示正常但 Firefox 不显示

这是最常见的兼容性坑：clip-path: path("M...") 在 Chrome/Edge 里原生支持，Firefox 目前只认 -webkit-clip-path 前缀版本，而且必须同时提供两个声明，否则 Firefox 彻底忽略。

立即学习“前端免费学习笔记（深入）”；

正确写法是：

element {  clip-path: path('M 50 100 C 20 80, 20 40, 50 20 C 80 40, 80 80, 50 100 Z');  -webkit-clip-path: path('M 50 100 C 20 80, 20 40, 50 20 C 80 40, 80 80, 50 100 Z');}

另外注意三点：

路径字符串里的空格和逗号不能省，C 20 80,20 40（逗号后没空格）在部分浏览器会解析失败
数值单位统一用无单位数字（默认是用户坐标系，1 单位 = 1px），别混用 px 或 %
Firefox 不支持 path() 中的 arc 指令（A），要用贝塞尔曲线模拟圆弧

性能差、动画卡顿？clip-path 不是万能裁刀

clip-path 是合成层操作，但每次重绘都会触发 Layout + Paint，尤其当路径点数 > 20 或配合 transform 动画时，GPU 负担明显上升。真实项目中，以下情况要警惕：

对 img 或大尺寸 video 元素频繁使用 path() 裁切，滚动时掉帧严重——优先考虑用 SVG <clipPath> 定义后复用
用 @keyframes 动画 clip-path，Chrome 从 v115 开始支持 polygon() 关键帧插值，但 path() 仍不支持逐点动画，强行写只会跳变
服务端渲染（SSR）页面里用 JS 注入 clip-path，可能造成水合 mismatch——把裁切逻辑移到 CSS 类里，用 class 切换更稳妥