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群，并关注我们的微博，谢谢支持。

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

{ 发表评论 }

姓名 (必填)

邮件 (必填)

网站

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

使用 SAP UI5 Smart Chart 控件轻松绘制十数种不同类型的专业图表试读版
一套适合 SAP UI5 初学者循序渐进的学习教程本专栏计划的文章数在 300 篇左右,到 2022年11月19日为止,目前已经更新了 149 篇,专栏完成度为 49.6%. 作者简介 Jerry ...
CSS clip:rect矩形剪裁功能
CSS中有一个属性叫做clip,为修剪,剪裁之意.配合其属性关键字rect可以实现元素的矩形裁剪效果.此属性安安稳稳地存在于CSS2.1中,且使用上基本上没有类似于max-height/display ...
将CSS CLIP属性应用在：扩展覆盖效果
日期:2013-3-18 来源:GBin1.com 在线演示我们想要展示如何利用CSS3 clip属性制作一种简单而整洁的扩展效果,当点击一个box元素时实现平稳过渡.这个想法是为了实现某种叠加 ...
MATLAB轻松绘制地图路线——已知及未知坐标下的处理方法(1)
文章目录已知坐标的情况未知坐标的情况完整工程文件下载链接: 要想绘制地图路线, 最基本的要素就是各点的坐标,有了坐标,还要知道哪个点和哪个点相连,最后将各点相连即可: 但有时候我们有的往往只是 ...
CSS clip:rect矩形剪裁功能及一些应用介绍
CSS clip:rect矩形剪裁功能及一些应用介绍 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.c ...
MATLAB轻松绘制地图路线——Dijkstra(迪杰斯特拉)算法最短路径规划
文章目录 1. 地图绘制 2. 计算各节点之间的距离 3. Dijkstra(迪杰斯特拉)算法 4. 根据计算出的距离利用Dijkstra(迪杰斯特拉)算法找出指定节点之间的最短路径工程文件(可直接 ...
Font Awesome一套绝佳的图标字体库和CSS框架的使用
场景 Font Awesome 一套绝佳的图标字体库和CSS框架官网: http://fontawesome.dashgame.com/ 实现从官网下载资源文件,解压后的目录将上面解压后的四个目 ...
字体图标库（Font Awesome）的使用--绝佳的图标字体库和CSS框架
一.概述 web项目(前台/后台)开发中,很多地方需要使用图标样式(如:删除图标或短信图标,见下图),当然可以选择图片当背景或者用<img>标签,但是用图片的不灵活性也是显然易见的,如颜色 ...
R语言|4. 轻松绘制临床基线表Table 1 临床三线表绘制
R语言|4. 轻松绘制临床基线表Table 1 regular table regular 欢迎关注公众号第四次考核 Jimmy 学徒考核 Linux安装软件 rnaseq上游分析-2 ascp k ...

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

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

最新文章

热门文章