Elysia Tools
导航
Design
生成自定义形状的 CSS 裁剪路径属性
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
等待运行
工具使用指南
CSS 裁剪路径生成器是一款高效的在线工具，旨在帮助开发者快速生成 clip-path 属性代码，通过简单的参数调整即可创建圆形、多边形、星形等多种自定义形状，轻松实现网页元素的创意裁剪效果。
背景
设计师要求在用户个人资料页使用六边形头像，以提升视觉独特性。
问题
手动计算六边形的坐标点非常繁琐且容易出错。
如何使用
选择 Hexagon（六边形）形状，调整大小至 100%，直接复制生成的代码。
shape: hexagon, size: 100结果
获得了一段精准的 clip-path 代码，成功将头像图片裁剪为完美的六边形。
背景
需要在促销横幅中添加一个星形装饰，用于突出显示折扣信息。
问题
需要快速生成一个五角星形状的 CSS 容器。
如何使用
选择 Star（星形）形状，设置边数为 5，调整半径以达到理想的尖角效果。
shape: star, sides: 5, radius: 1.2结果
快速生成了星形裁剪代码，直接应用于 CSS 类中，实现了动态的装饰效果。
clip-path 是一个 CSS 属性，它允许你通过定义裁剪区域来隐藏元素的部分内容，从而创建各种自定义形状。
现代主流浏览器（如 Chrome, Firefox, Safari, Edge）均已良好支持 clip-path 属性。
可以，通过调整“边数”滑块，你可以轻松生成 3 到 12 边之间的多边形或星形。
不支持，该工具专注于生成 CSS 代码，你可以将代码应用到 HTML 元素上以实现裁剪效果。
你可以通过“大小 (%)”滑块来控制裁剪区域相对于容器的缩放比例。