Clippy – 輕松繪制 CSS clip-path 裁剪路徑工具

Sponsor

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

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。