03 / 指南
真实布局中的 CSS clip-path 示例
从预设开始，或编辑 3–32 个多边形顶点，制作头像、方向图片和斜切卡片，并比较完整 CSS 与 clip-path 声明。
内容由 Toolars 维护 · 更新于 2026-09-25
六边形头像
选择六边形预设，切换到“仅声明”输出，把 clip-path 规则复制到自己编写的方形图片样式中。设置相等的宽高并使用 object-fit: cover；完整示例 CSS 使用 4:3 演示框，不应原样套在头像上。检查面部是否贴近边缘，修改多边形也不会自动移动主体。
带方向感的图片
把箭头形预设用于行动按钮旁的装饰图片。比较同一组百分比坐标在正方形与宽矩形中的效果：两个轴分别缩放，角度可能变化。再检查手机宽度。重要文字和真实链接应放在装饰裁剪区域之外。
不裁掉正文的斜切卡片
将平行四边形用于卡片背后的装饰层。若给整个内容容器裁剪，标题、焦点轮廓或按钮可能被切掉。形状预览不能证明无障碍可用；请在成品中用 Tab 切换控件，并分别检查桌面和手机布局。
复制后再验证
先选六边形预设，把第一个顶点设为 X 30%、Y 0%，观察轮廓变化。可在所选顶点后添加点，或在 3–32 点范围内删除点。支持拖动、输入 0–100% 坐标，以及方向键微调（1%；按住 Shift 为 10%）。只复制 clip-path 声明可保留原有布局；完整 CSS 包含演示样式。在桌面和手机上比较方形与宽容器，文字和焦点轮廓应放在裁剪层之外，并保留矩形回退。暂不支持导入 CSS，也不支持编辑 circle、ellipse 或 inset。
维护与验证
本指南及关联工具由 Toolars 维护。如果说明与当前输出不一致，请反馈，以便一起复核。
下方可下载示例是合成测试输入，不是客户案例。复现时保持输入与设置一致，并按示例要求检查下载文件，而不只看预览。
这些检查只覆盖该示例，不代表所有文件、浏览器或目标软件都通过验证。工具变更后需要复核，分享前也请检查自己的输出。
反馈内容或工具问题打开 CSS 裁剪路径生成器
从预设开始，或编辑 3–32 个多边形顶点，制作头像、方向图片和斜切卡片，并比较完整 CSS 与 clip-path 声明。