CSS Clip-Path裁剪路径生成器
可视化生成CSS clip-path裁剪路径代码,支持多边形、圆形、椭圆等形状,可批量处理图片
【本地执行模式】 : 您的所有数据均在浏览器中处理,不会上传服务器,数据安全有保障。不放心的,可等待页面加载完成后 断网使用!(需提前登录账号)
【速度及稳定性】 : 处理速度由您的机器配置决定。少数工具可能出现无法使用或异常,请使用:批量工具软件版(首页可进入)。或联系技术 wxcwxc1989 处理!
【注意】:软件版和在线版的工具是 不同的。软件版工具更专业,更强大,支持win10/11;在线版更方便,工具数量更多,手机电脑通用。各有千秋!请根据情况选择!
【速度及稳定性】 : 处理速度由您的机器配置决定。少数工具可能出现无法使用或异常,请使用:批量工具软件版(首页可进入)。或联系技术 wxcwxc1989 处理!
【注意】:软件版和在线版的工具是 不同的。软件版工具更专业,更强大,支持win10/11;在线版更方便,工具数量更多,手机电脑通用。各有千秋!请根据情况选择!
工具使用
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
当前点数: 3
宽度 (px)
高度 (px)
支持批量选择多张图片
当前: 90%
0%
请选择图片文件
使用说明
软件使用说明
- 选择编辑模式:工具提供两种模式:
- 单个编辑模式:可视化编辑单个clip-path形状,实时预览效果并获取CSS代码
- 批量处理模式:上传多张图片,统一应用裁剪形状后批量导出
- 选择形状类型:
- 多边形(polygon):自定义多边形形状,可拖拽控制点调整
- 圆形(circle):设置半径和圆心位置
- 椭圆(ellipse):设置横轴、纵轴半径和中心位置
- 内嵌矩形(inset):设置四边边距和圆角
- 选择预设形状:提供20+预设形状,包括三角形、梯形、菱形、五边形、六边形、八边形、箭头、五角星、十字形、对话框等。
- 自定义编辑:
- 拖拽控制点调整形状位置
- 点击"添加点"或"删除点"调整多边形顶点数量
- 设置背景图片或渐变颜色预览效果
- 获取代码:编辑完成后,在代码框中查看生成的CSS代码,点击"复制"按钮一键复制。可选择是否包含-webkit-前缀。
- 批量处理:切换到批量处理模式,上传多张图片,选择要应用的形状,设置输出格式和质量,点击"开始批量处理",完成后点击"下载全部结果(ZIP)"下载。
常见问题
答:CSS clip-path属性可以将元素裁剪成指定的形状,只显示裁剪区域内的内容,区域外的部分会被隐藏。常用于制作不规则形状的图片、创意布局、悬停动效等网页设计场景。
答:polygon(多边形)可以创建任意多边形,通过定义多个顶点坐标实现;circle(圆形)创建正圆形裁剪区域;ellipse(椭圆)创建椭圆形裁剪区域;inset(内嵌)创建矩形裁剪区域并支持圆角设置。
答:-webkit-前缀用于兼容旧版本的Chrome、Safari等Webkit内核浏览器。虽然现代浏览器已普遍支持标准的clip-path属性,但为了确保更好的兼容性,建议同时使用带前缀和不带前缀的两条CSS规则。
答:批量处理支持常见的图片格式,包括JPG、JPEG、PNG、GIF、WebP、BMP等。输出格式可选择PNG(支持透明背景)、JPEG或WebP,并可调整输出质量。
答:选择"多边形(polygon)"类型后,可以:1)从预设形状中选择一个作为基础;2)拖拽控制点调整位置;3)使用"添加点"按钮增加顶点;4)使用"删除点"按钮移除不需要的顶点。通过这些操作可以创建任意复杂的多边形形状。
答:clip-path使用百分比坐标系统,以元素左上角为原点(0% 0%),右下角为(100% 100%)。横轴向右为正方向,纵轴向下为正方向。所有坐标点都是相对于元素自身尺寸的百分比值。
答:在批量处理模式中,可以通过"输出质量"滑块控制图片压缩程度,范围从10%到100%。选择PNG格式可保留透明背景,适合需要透明效果的场景;选择JPEG格式文件更小但不支持透明;WebP格式兼顾质量和文件大小。