CSS Clip-Path生成器 - 可视化创建图形 在线
用可视化拖放编辑器创建CSS clip-path图形。生成多边形、圆形、椭圆和内嵌路径，带实时预览。
常见问题
什么是CSS clip-path？
CSS clip-path是一个创建裁剪区域的属性，用于确定元素的哪些部分可见。裁剪形状内的所有内容都会显示，外部的内容则被隐藏。它支持多种形状函数：polygon()用于任意多点形状，circle()用于圆形区域，ellipse()用于椭圆区域，inset()用于带可选圆角的矩形区域。它被广泛用于创建非矩形布局、装饰性分区分隔线、图像遮罩和创意UI元素。
如何使用这个clip-path生成器？
从选项卡中选择形状类型（Polygon、Circle、Ellipse或Inset）。对于多边形，拖动画布上的控制点来调整形状，点击边缘添加新点，或选择预设形状作为起点。对于圆形/椭圆形，使用滑块或数字输入调整半径和中心位置。对于内嵌，设置上、右、下、左的内嵌值，并可选择添加边框圆角。查看实时更新的预览，然后一键复制生成的CSS代码。
我的数据安全吗？有任何内容发送到服务器吗？
是的，您的数据完全安全。此工具完全在您的浏览器中使用客户端JavaScript运行。没有任何图像数据、形状配置或其他信息发送到任何服务器。所有计算都在您的设备上本地进行，确保完全的隐私。
百分比和像素单位有什么区别？
百分比（%）值相对于元素的尺寸，使您的clip-path具有响应性——当元素调整大小时会自动缩放。像素（px）值是绝对且固定的，意味着无论元素的尺寸如何，clip-path都保持相同大小。响应式设计请使用百分比（推荐），需要精确固定大小的裁剪区域时请使用像素。
可以在clip-path形状之间制作动画吗？
可以，CSS clip-path形状可以使用CSS过渡和动画来制作动画。关键要求是起始和结束形状必须使用相同的形状函数（例如，都是polygon()）并且具有相同数量的点。例如，您可以平滑地将一个三角形过渡到另一个三角形，或将正方形变形为菱形。只需在元素上应用'transition: clip-path 0.3s ease'即可。
有哪些预设形状可用？
该工具提供了预设多边形形状库，包括：三角形、菱形、五边形、六边形、八边形、星形、右箭头、十字形、梯形和斜角。每个预设可以一键应用，然后通过拖动控制点进一步自定义以创建所需的形状。
哪些浏览器支持CSS clip-path？
使用基本形状（polygon()、circle()、ellipse()、inset()）的CSS clip-path自2020年1月起已获支持，可在所有现代浏览器中使用：Chrome 90+、Firefox 88+、Safari 14+和Edge 90+。对于较旧的WebKit浏览器，您可能需要-webkit-clip-path供应商前缀。该功能被认为是基准功能，可以安全地在生产中使用。
代码示例
// CSS Clip-Path Generator - JavaScript Implementation
// Generate polygon clip-path from an array of [x, y] coordinate pairs
function generatePolygonClipPath(points) {
const coords = points
.map(([x, y]) => `${x}% ${y}%`)
.join(', ');
return `clip-path: polygon(${coords});`;
}
// Generate circle clip-path
function generateCircleClipPath(radius, centerX = 50, centerY = 50) {
return `clip-path: circle(${radius}% at ${centerX}% ${centerY}%);`;
}
// Generate ellipse clip-path
function generateEllipseClipPath(radiusX, radiusY, centerX = 50, centerY = 50) {
return `clip-path: ellipse(${radiusX}% ${radiusY}% at ${centerX}% ${centerY}%);`;
}
// Generate inset clip-path with optional border-radius
function generateInsetClipPath(top, right, bottom, left, borderRadius = 0) {
const inset = `${top}% ${right}% ${bottom}% ${left}%`;
if (borderRadius > 0) {
return `clip-path: inset(${inset} round ${borderRadius}%);`;
}
return `clip-path: inset(${inset});`;
}
// Common preset shapes
const PRESETS = {
triangle: [[50, 0], [100, 100], [0, 100]],
diamond: [[50, 0], [100, 50], [50, 100], [0, 50]],
hexagon: [[25, 0], [75, 0], [100, 50], [75, 100], [25, 100], [0, 50]],
star: [[50, 0], [61, 35], [98, 35], [68, 57], [79, 91], [50, 70], [21, 91], [32, 57], [2, 35], [39, 35]],
};
// Usage
console.log(generatePolygonClipPath(PRESETS.triangle));
// clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
console.log(generateCircleClipPath(40, 50, 50));
// clip-path: circle(40% at 50% 50%);
console.log(generateInsetClipPath(5, 10, 5, 10, 15));
// clip-path: inset(5% 10% 5% 10% round 15%);