CSS 角落切割工具
生成 CSS clip-path/mask 声明，可独立切割、刻切或挖凹盒子的四个角落 — 按角落或统一样式和大小设置，单位为 px 或 %，带实时预览。
输入
下面每个角落切割的大小单位。
启用后，所有角落的样式和大小设置将应用于每个角落。
百分比大小超过 50 会被限制，防止对角角落重叠。
输出
切割后的角落盒子将显示在这里。
与上方预览相匹配的内联样式 div — 可粘贴到任何位置。
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-corner-cutter \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"unit": "px",
"linked": "true",
"allStyle": "bevel",
"allSize": "24"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-corner-cutter` tool (CSS Corner Cutter) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-corner-cutter/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS 角落切割工具 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
什么是"切割"角落？
border-radius只生成光滑的圆角。切割角落是不同的 — 它从盒子中移除一个楔形，而不是将其圆角化，该楔形有三种常见的形状：
- 斜切（Bevel）— 单条斜线，卡片、按钮和价格标签上经典的"剪裁角落"外观。
- 刻切（Notch）— 直角阶梯切割，给出方形选项卡/票根轮廓。
- 挖凹（Scoop）— 从角落向内弯曲的凹弧，就像从中咬出来一样。
此工具为这三者中的任何组合生成可复制粘贴的CSS声明，可独立按角落设置，带实时预览。
如何使用此工具
- 选择单位（
px或%）— 它适用于下面每个角落的大小。 - 保持所有角落相同打开，为所有四个角落设置一个样式和大小，或关闭以独立设置每个角落（左上、右上、右下、左下）— 自由混合斜切、刻切和挖凹，或将角落大小保持在
0以保持方形。 - 复制CSS并将其应用于具有定义宽度/高度的任何元素。预览准确显示其外观；下面的HTML代码片段是相同的标记，作为自包含的内联样式
<div>，可以粘贴到不方便使用样式表的任何地方。
为什么使用两种不同的CSS技术？
斜切和刻切都由直线组成，因此它们被表示为clip-path: polygon(...)中的额外点 — 与CSS剪裁路径生成器的形状库使用的技术相同。挖凹是不同的：clip-path polygon()只能在点之间绘制直边，因此无法向内平滑地弯曲。雕刻凹曲线需要从radial-gradients构建的mask-image — 每个角落一个，在切割半径内透明，在外部不透明。因为clip-path和mask是应用于同一元素的独立属性，此工具在混合某些角落的直切和其他角落的挖凹时，会同时输出两个块；浏览器呈现它们的交集。
常见问题
这在每个浏览器中都有效吗？
clip-path: polygon()和mask-image在当前的Chrome、Firefox、Safari和Edge中都得到广泛支持。生成的CSS始终包含所使用任何属性的-webkit-前缀形式，因为Safari历来对mask-image需要它。
为什么我的百分比大小挖凹比预期的要小？
百分比大小被限制为50，以防止对角角落的切割相互重叠。
我只想要简单的圆角，不要切割 — 我应该使用什么？
那是border-radius，不是切割 — 请改用Border Radius 生成器。如果您正在圆角化上传的实际图像（而不是为实时盒子生成CSS），请使用Round Corners。
隐私
一切都在您的浏览器中发生。您选择的样式和大小永远不会发送到服务器 — CSS和预览在您调整控件时在本地生成和更新。