CSS clip-path 生成器

五种形状函数

常用多边形剪辑

/* Hexagon */
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);

/* Rhombus */
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

/* Chevron / arrow pointing right */
clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%);

/* Parallelogram */
clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);

/* Diagonal slice (modern hero section) */
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

主视觉区块的斜切线可能是所有用法中最常见的，它能在不使用任何 SVG 的情况下，让区块呈现出带有角度的现代外观。

为 clip-path 添加动画

只要两个状态具有相同的形状函数且点数相同，clip-path 就能实现动画过渡。一个四顶点多边形可以平滑地过渡到另一个四顶点多边形；添加或删除顶点则会破坏插值过程。

.card { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.card:hover { clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); }

适用于显现效果、细微的悬停变形或页面过渡。

clip-path 与 overflow: hidden 的区别

overflow: hidden 裁剪至边界框（border-box）的矩形（可用 border-radius 进行圆角处理）；clip-path 则裁剪至你定义的任意形状，并裁剪所有内容，包括阴影和轮廓。若需要让阴影在形状外部仍然可见，那么 clip-path 并不适合。

filter: drop-shadow() 可为使用 clip-path 的元素重新添加跟随形状的阴影，但速度较慢。

性能

在现代浏览器中，clip-path 会经过 GPU 加速，因此带动画的 clip-path 也很流畅。例外是 path() 以及顶点数超过 40 个的超复杂多边形，在部分浏览器中会回退到 CPU 渲染。

可访问性

clip-path 只改变可见的部分。屏幕阅读器、键盘焦点和指针事件仍以元素的完整盒子为准，而非裁剪后的形状。若图像被裁剪成星形，其 alt 文本仍会正常朗读；若按钮被裁剪成人字形（chevron），其点击目标是整个矩形，而非可见的人字形，这可能导致用户误点看似空白的区域。

对于裁剪形状不规则的按钮，应将元素的宽度和高度设置得尽量贴合，使点击区域（hitbox）与可见区域大致吻合。