什么是 CSS clip-path？

clip-path 是 CSS 属性，用于创建元素的可见区域裁剪。超出裁剪路径的区域将被隐藏，常用于创建非矩形的元素形状。

clip-path 支持哪些形状？

支持 circle()（圆形）、ellipse()（椭圆）、polygon()（多边形）、inset()（内凹矩形）等基本形状，还可以使用 SVG 路径。

现代浏览器（Chrome、Firefox、Safari、Edge）都支持 clip-path。部分高级功能如 path() 需要较新版本。

clip-path 可以使用 CSS transition 实现形状之间的平滑过渡，前提是起止形状类型相同且点数一致。

可视化创建 CSS clip-path 裁剪路径，支持圆形、椭圆、多边形和内凹形状

新工具

预览

背景颜色裁剪颜色

CSS 代码

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

形状

预设

控制点