CSS3 剪贴路径(Clip-path)在线生成器

这是一款可在线调整并生成CSS3剪贴路径的工具,用户从右侧的多边形列表中选择需要的形状,再在左侧的操作区域中通过拖拽构成多边形的点来调整多边形的点与线形状,或者点击删除不需要的多边形顶点,就可以在下方的代码区域中实时观察到生成的CSS3剪贴路径代码。此外,还有选择背景图片、设置是否显示路径外背景图形以及是否显示CSS3 webkit前缀等功能。

显示路径外图像

CSS前缀

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

    演示背景图片