开发者 / CSS形状

CSS裁剪路径生成器：多边形、圆形、椭圆和inset

使用六种多边形预设、可拖动并可通过键盘调整的顶点，以及圆形、椭圆和inset控件制作CSS裁剪效果。预览渐变或本地图片，并复制百分比或像素CSS。

CSS裁剪路径生成器：多边形、圆形、椭圆和inset: 将预览裁剪为所选形状，但不会更改底层图片文件。百分比输出会根据元素尺寸变化。像素输出使用参考宽度和高度；显示的预览会缩放以适应屏幕。完全在浏览器中本地运行，文件不会上传到服务器。

裁剪路径形状台本地处理

完全在浏览器中运行

形状预设CSS单位参考宽度（px）参考高度（px）

本地图片预览（可选）

拖动带编号的点，使用其箭头键，或输入坐标。下方坐标以百分比表示；像素输出使用参考尺寸。

点1X（％）Y（％）

点2X（％）Y（％）

点3X（％）Y（％）

点4X（％）Y（％）

点5X（％）Y（％）

点6X（％）Y（％）

clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

百分比形状会随元素调整大小。圆形百分比使用归一化对角线；椭圆百分比使用宽度和高度。像素坐标固定为参考尺寸。

CSS裁剪

MDN clip-path：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path。裁剪会改变可见区域，但不会改变元素的布局框。

W3C CSS形状第1级，基本形状：https://www.w3.org/TR/css-shapes-1/#basic-shapes。多边形坐标和椭圆半径会根据参考框进行解析；圆形百分比使用参考框的归一化对角线。预设坐标和渐变属于原创图案。

可选的图片预览会保留在你的设备上。不会上传任何内容。

不拖动时，如何编辑顶点？

选中带编号的顶点控制柄并使用方向键，或在顶点列表中输入X和Y百分比。多边形至少需要三个顶点。

这个工具会导出裁剪后的图片吗？

不会。它会为HTML元素导出CSS。本地图片仅用于预览。

圆形百分比如何测量？

CSS使用归一化对角线sqrt((width squared + height squared) / 2)作为圆形半径的参考值。椭圆半径分别使用宽度和高度。

免费工具·使用在浏览器中次·无需账户