Loading...
Loading...
可视化创建 CSS clip-path 形状:拖动多边形顶点或选预设,切换圆形、椭圆或 inset,预览并复制 CSS
用 CSS clip-path 把任意元素裁成形状,全程可视化。从六边形、星形、箭头或消息气泡等预设开始,直接在预览上拖动顶点微调。切换圆形、椭圆或 inset 模式做圆角和矩形裁剪,放入自己的图片看真实效果,再复制带 webkit 前缀的 clip-path CSS。
形状是标准 CSS,无需任何库即可作用于图片、div、按钮和区块。全部在浏览器里运行,预览用的图片绝不离开你的设备。
直接在预览上移动多边形顶点,形状实时更新。
从三角形、六边形、星形、箭头、V 形等开始再微调。
多边形、圆形、椭圆与 inset,圆角与矩形裁剪配有滑块。
用渐变或上传图片,直观看到裁剪的真实效果。
选一种形状模式和一个起始预设。
拖动顶点或移动滑块,直到形状满意。
可选地上传一张图片预览真实裁剪。
复制 clip-path CSS 粘进你的样式表。
不用图片就给 hero 或区块做斜边、V 形边缘。
用纯 CSS 把照片裁成六边形、圆形或自定义形状。
做任意尺寸都清晰的箭头、徽章与对话气泡。
多边形顶点以百分比存储并渲染成 clip-path 字符串,可拖拽手柄按指针位置更新它们。圆形、椭圆与 inset 模式各自生成对应的函数式记法。
生成器全程在浏览器运行。预览用的任何图片都留在你的设备上,不上传。
形状是纯 CSS,随拖动重算,预览无延迟、无网络请求。