👁️ 预览
📝 CSS代码
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
⚙️ 参数
支持哪些形状？
polygon、circle、ellipse、inset四种基本形状。
如何编辑多边形顶点？
使用滑块精确控制坐标，或选择预设形状。
浏览器兼容性？
Chrome 55+、Firefox 54+、Safari 13.1+、Edge 79+。IE不支持。
数据安全吗？
完全安全。所有编辑在浏览器本地完成。
免费在线CSS clip-path生成器，无需注册，可视化编辑多边形、圆形、椭圆裁剪路径，实时预览效果，一键复制CSS代码。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用polygon、circle、ellipse、inset四种基本形状。
使用滑块精确控制坐标，或选择预设形状。
Chrome 55+、Firefox 54+、Safari 13.1+、Edge 79+。IE不支持。
完全安全。所有编辑在浏览器本地完成。
免费在线CSS clip-path生成器，可视化编辑多边形、圆形、椭圆、内嵌矩形等裁剪路径。实时预览裁剪效果，一键复制CSS代码。支持10种预设形状，参数精确调节。无需注册。
创建独特的元素形状，如斜切卡片、菱形图片、箭头指示器等，增强视觉表现力。
配合CSS transition/animation，实现形状变换动画效果。
突破矩形布局限制，创建几何形状的创意页面布局。
clip-path属性定义元素的裁剪区域，支持polygon()、circle()、ellipse()、inset()四种基本函数和SVG path()。polygon()使用百分比坐标定义多边形顶点；circle()定义圆心和半径；ellipse()定义椭圆中心和两个半径；inset()定义内嵌矩形和圆角。配合clip-path可以做形状变换动画。
CSS属性，定义元素可见区域，将元素裁剪为任意形状。