CSS clip-path 生成器
to add points
to custom polygon.

自定义形状

Round edges

The inset() shape optionally allows values similar to border-radius for rounded edges. This new feature may be buggy in your browser.

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

Round edges

The inset() shape optionally allows values similar to border-radius for rounded edges. This new feature may be buggy in your browser.

Custom shape

前缀

示例大小

×

示例背景图片

显示剪裁路径外的形状

关于 Clip Paths

The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.

CSS Animations and transitions are possible with two or more clip-path shapes with the same number of points.

浏览器支持