视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
Clippy–轻松绘制CSSclip-path裁剪路径工具_html/css
2020-11-27 16:39:01 责编:小采
文档

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. 点击 codepen LOGO 图标,可以跳到 Code Pen 上 编辑,非常方便!

下载本文
显示全文
专题