CSS图书馆 » HTML & CSS » Clippy – 轻松绘制 CSS clip-path 裁剪路径工具

Clippy – 轻松绘制 CSS clip-path 裁剪路径工具

发表于: HTML & CSS, 前端开发. 评论
赞助商链接

Clippy 是一个 CSS clip-atch 属性绘制工具,使用它可以轻松绘制不同的几可形状的。

clip-path 是 CSS 中的一个裁剪属性,用于裁剪元素,通过此属性可以实现类似PS蒙版一样效果。若使用 clip-path 制作多边形的裁切图案,需要计算坐标位置,如:

.element { clip-path: polygon(x1 y1, x2 y2, x3 y3, …); }

从代码可以看出,计算这个坐标是相当麻烦的,所以使用 Clippy 就解决这个问题。

网站名称:Clippy
网站地址:http://bennettfeely.com/clippy/

使用 TIPS

1. 按住其中一个颜色点,下方代码会自动提醒该点的坐标位置。

2.选择右侧图形的「Custom Polygon」可以自己画形状。

需要注意的是,小编在测试时,有时候无法自定义,需要刷新下浏览器才正常。

自定义形状:

3. 点击 Code Pen LOGO 图标,可以跳到 Code Pen 上 编辑,非常方便!

clip-path 兼容性

clip-path 暂时是不兼容 IE 浏览器的,但没关系,IE 已经没什么人用了。常用的浏览器还是兼容的,比如 Chrome 24+, Safari 8+, Opera 15+等。


详细兼容性,请查看:caniuse
扩展阅读:clip-path 的蒙版用法: Clipping and Masking in CSS

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:结交更多有才华的设计师?请加入UI设计QQ群,与50000名设计师交流设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。