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

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

4月 13, 2016

评论

Sponsor

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

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

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

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

使用 TIPS

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

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

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

自定义形状：

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

clip-path 兼容性

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

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com

交流：为设计新人提供的设计交流群，请加入UI设计交流群，分享经验、接单、求职、聊设计。

赞助商链接

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。

版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

{ 发表评论 }

姓 名 (必填)

邮 件 (必填)

网 站