Clip-Path CSS 在线生成

站点概述

Clippy是一个 CSS clip-path 图形的在线生成工具，作者为 Bennett Feely。工具提供多种预设形状，并支持自定义控制点与圆角，面向前端开发者与设计师，网页免费使用，代码在 GitHub 开源。

主要功能与内容

• 预设图形：提供多边形、圆形与椭圆等预设。
• 自定义控制点：可拖动调整多边形的顶点位置。
• 圆角调整：支持对图形圆角参数进行设置。
• 实时预览：调整过程同步显示效果。
• 代码输出：生成并复制对应的 CSS 代码。
• 动画支持：支持配合过渡效果的写法。

特色与优势

该工具的特点在于把 clip-path 参数以可视化方式调整，用户无需手动试算坐标即可获得目标形状；输出的代码可直接粘贴到样式表中，配合过渡属性还能实现形状动画。

使用场景与适合人群

适合前端开发者实现不规则形状与装饰性裁切效果，也适合设计师快速验证形状构想；使用前建议确认目标浏览器的兼容性。

总结

总体而言，Clippy 是一个以 clip-path 生成为功能的工具，可视化调参是其主要特点；页面标注了作者信息，未标注发布时间，具体功能以站内呈现为准。