无需登录 数据私有 本地保存

CSS Clip-Path生成器 - 在线裁剪形状代码

前端设计 生成器 Clip-Path CSS 生成器
89
0
0
0
✅ 已复制到剪贴板
🎯 形状类型
🔷 顶点坐标 3 个顶点
💡 也可在预览中拖拽顶点调整
👁️ 实时预览
尺寸 px
clip-path: circle(40% at 50% 50%);

📚 CSS Clip-Path 常见问题

什么是 CSS clip-path？
clip-path 是 CSS 属性，用于裁剪元素的可视区域。它支持多种形状函数如 circle()、ellipse()、inset() 和 polygon()，可以创建圆形、椭圆、多边形等裁剪效果，只显示裁剪区域内的内容。
clip-path 的浏览器兼容性如何？
现代浏览器（Chrome 55+、Firefox 54+、Safari 10+、Edge 79+）均良好支持 clip-path。移动端 iOS Safari 10+、Android Chrome 也全面支持。IE 不支持，若需兼容可考虑使用 SVG clipPath 作为降级方案。
clip-path 和 overflow: hidden 有什么区别？
overflow: hidden 只能裁剪矩形区域（元素的边界框），而 clip-path 可以裁剪出任意形状（圆形、星形、多边形等），且裁剪边界可以超出元素原有范围。
clip-path 可以搭配动画使用吗？
可以！clip-path 支持 CSS transition 和 animation，可在形状之间平滑过渡。前提是形状类型相同且顶点数量一致（如两个 polygon 之间）。例如鼠标悬停时从圆形过渡到多边形，能创造惊艳的动画效果。
clip-path 会影响元素布局吗？
不会。clip-path 仅影响元素的视觉呈现，不会改变元素在文档流中的占位和布局。元素原本的盒模型、边距、点击区域（默认）保持不变。如需改变点击区域，可配合使用 pointer-events 或使用 SVG clipPath。
如何使用百分比和像素值？
clip-path 中推荐使用百分比（如 polygon(50% 0%, 100% 100%, 0% 100%)），这样形状会随元素尺寸自适应缩放。使用像素值时形状固定，元素尺寸变化时裁剪区域不会等比缩放。inset() 的圆角（round）通常使用 px 单位。
🔧 相关工具