CSS clip-path生成器

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

    Triangle
    Trapezoid
    Parallelogram
    Rhombus
    Pentagon
    Hexagon
    Heptagon
    Octagon
    Nonagon
    Decagon
    Bevel
    Rabbet
    Left arrow
    Right arrow
    Left Point
    Right Point
    Left Chevron
    Right Chevron
    Star
    Cross
    Message
    Close
    Frame
    Inset
    Custom Polygon
    Circle
    Ellipse

宽高设置

×

背景图设置

显示外部效果

to add points
to custom polygon.
前缀代码

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

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

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

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