CSS Clip-Path Generator
Generate clip-path CSS values for circle, ellipse, polygon, and inset shapes, with optional -webkit- vendor prefix.
Input
- - Shape type:
circle | ellipse | polygon | inset (default circle) - Shape-specific parameters:
-
circle:
radius % (default 50),
cx % (default 50),
cy % (default 50)
-
ellipse:
rx % (default 50),
ry % (default 35),
cx % (default 50),
cy % (default 50)
-
inset:
top %,
right %,
bottom %,
left % (default all 10)
-
polygon: list of
x% y% point pairs (at least 3 points)
- - Vendor prefix: boolean (default
false)
Output
- - INLINECODE20
- Optionally
-webkit-clip-path: <value>; if vendor prefix requested
Instructions
- 1. Parse the user's request for shape type and parameters.
- Build the clip-path value:
-
circle:
circle(<radius>% at <cx>% <cy>%)
-
ellipse:
ellipse(<rx>% <ry>% at <cx>% <cy>%)
-
inset:
inset(<top>% <right>% <bottom>% <left>%)
-
polygon:
polygon(<x1>% <y1>%, <x2>% <y2>%, ...) — join all points with
,
- 3. If the user mentions a named preset shape, map to its polygon points:
-
Triangle:
polygon(50% 10%, 90% 90%, 10% 90%)
-
Pentagon:
polygon(50% 5%, 95% 35%, 80% 90%, 20% 90%, 5% 35%)
-
Hexagon:
polygon(50% 5%, 90% 25%, 90% 75%, 50% 95%, 10% 75%, 10% 25%)
-
Star:
polygon(50% 5%, 61% 35%, 95% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 5% 35%, 39% 35%)
-
Arrow:
polygon(5% 35%, 60% 35%, 60% 10%, 95% 50%, 60% 90%, 60% 65%, 5% 65%)
- 4. Output INLINECODE32
- If vendor prefix requested, also output
-webkit-clip-path: <value>; above the standard property. - Include a short usage example showing the property applied to a
.element class.
Options
- -
shape: circle | ellipse | polygon | inset — default INLINECODE40 - INLINECODE41 : 0–50 — default
50 (circle only) - INLINECODE43 : 0–100 — default INLINECODE44
- INLINECODE45 : 0–100 — default INLINECODE46
- INLINECODE47 : 0–50 — default
50 (ellipse only) - INLINECODE49 : 0–50 — default
35 (ellipse only) - INLINECODE51 /
right / bottom / left: 0–50 — default 10 (inset only) - INLINECODE56 : true | false — default INLINECODE57
Examples
Input: "Circle clip path, 40% radius, centered"
Output:
CODEBLOCK0
Input: "Triangle clip path"
Output:
CODEBLOCK1
Input: "Ellipse clip, 60% wide 40% tall, centered, with webkit prefix"
Output:
CODEBLOCK2
Input: "Inset rectangle 15% margin all sides"
Output:
CODEBLOCK3
Error Handling
- - If polygon has fewer than 3 points, inform the user and ask for at least 3 coordinate pairs.
- If any percentage is outside 0–100, clamp it and note the adjustment.
- If shape type is unrecognized, default to
circle and notify the user. - For Safari compatibility, remind the user to add the
-webkit-clip-path vendor prefix (or set vendorPrefix to true).
CSS 裁剪路径生成器
为圆形、椭圆、多边形和内嵌形状生成 clip-path CSS 值，可选择添加 -webkit- 厂商前缀。
输入
- - 形状类型：circle | ellipse | polygon | inset（默认 circle）
- 形状特定参数：
-
圆形：radius %（默认 50）、cx %（默认 50）、cy %（默认 50）
-
椭圆：rx %（默认 50）、ry %（默认 35）、cx %（默认 50）、cy %（默认 50）
-
内嵌：top %、right %、bottom %、left %（默认全部为 10）
-
多边形：x% y% 点对列表（至少 3 个点）
输出
- - clip-path: <值>;
- 如果请求厂商前缀，可选择输出 -webkit-clip-path: <值>;
使用说明
- 1. 解析用户对形状类型和参数的请求。
- 构建裁剪路径值：
-
圆形：circle(<半径>% at
% %)
- 椭圆：ellipse(% % at % %)
- 内嵌：inset(% % % %)
- 多边形：polygon(% %, % %, ...) — 用 , 连接所有点
- 3. 如果用户提到命名预设形状，映射到其多边形点：
- 三角形：polygon(50% 10%, 90% 90%, 10% 90%)
- 五边形：polygon(50% 5%, 95% 35%, 80% 90%, 20% 90%, 5% 35%)
- 六边形：polygon(50% 5%, 90% 25%, 90% 75%, 50% 95%, 10% 75%, 10% 25%)
- 星形：polygon(50% 5%, 61% 35%, 95% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 5% 35%, 39% 35%)
- 箭头：polygon(5% 35%, 60% 35%, 60% 10%, 95% 50%, 60% 90%, 60% 65%, 5% 65%)
- 4. 输出 clip-path: <值>;
- 如果请求厂商前缀，在标准属性上方也输出 -webkit-clip-path: <值>;
- 包含一个简短的使用示例，展示应用于 .element 类的属性。
选项
- - shape：circle | ellipse | polygon | inset — 默认 circle
- radius：0–50 — 默认 50（仅圆形）
- cx：0–100 — 默认 50
- cy：0–100 — 默认 50
- rx：0–50 — 默认 50（仅椭圆）
- ry：0–50 — 默认 35（仅椭圆）
- top / right / bottom / left：0–50 — 默认 10（仅内嵌）
- vendorPrefix：true | false — 默认 false
示例
输入：圆形裁剪路径，半径 40%，居中
输出：
css
clip-path: circle(40% at 50% 50%);
输入：三角形裁剪路径
输出：
css
clip-path: polygon(50% 10%, 90% 90%, 10% 90%);
输入：椭圆裁剪，宽 60% 高 40%，居中，带 webkit 前缀
输出：
css
-webkit-clip-path: ellipse(60% 40% at 50% 50%);
clip-path: ellipse(60% 40% at 50% 50%);
输入：内嵌矩形，所有边距 15%
输出：
css
clip-path: inset(15% 15% 15% 15%);
错误处理
- - 如果多边形少于 3 个点，通知用户并要求至少提供 3 个坐标对。
- 如果任何百分比超出 0–100 范围，将其限制在范围内并注明调整。
- 如果形状类型无法识别，默认为 circle 并通知用户。
- 为兼容 Safari，提醒用户添加 -webkit-clip-path 厂商前缀（或将 vendorPrefix 设置为 true）。
