CSS clip-path生成器

inset() 形状可选地允许与 border-radius 类似的圆边值。此新功能在您的浏览器中可能存在错误。

    宽高设置

    ×

    背景图设置

    显示外部效果

    to add points
    to custom polygon.
    前缀代码

    -webkit-clip-path: ; clip-path: ;

    如何使用在线 CSS clip-path生成器？

    您可以按照以下步骤生成 CSS clip-path代码。

    1. 选择您想要用作clip-path模板的形状。
    2. 您可以通过设置其 URL 来使用占位符图像或上传您自己的背景图像。
    3. 您可以更改预览图像的宽度和高度，由于剪辑路径坐标以百分比给出，因此图像的纵横比比宽度和高度更重要。
    4. 拖动点以根据需要更改clip-path效果，获得所需结果后，您可以使用显示或隐藏外部图片选项查看最终结果。
    5. 如果您获得了所需的clip-path效果，您可以将 CSS 代码复制到剪贴板并粘贴到您的 Web 项目中。