[切版工具] Clippy 好用的clip-path maker

在網頁設計上常常會遇到不同多邊形的網頁效果，

可以使用clip-path屬性來達到，

如果對於空間概念比較不好或跟我一樣懶的話，

就可以使用Clippy這個工具～

如下圖所示，你可以透過快速的圖形效果，

產生語法，這個範例我們是要拉一個算梯形的效果mask

clip-path: polygon(50% 100%, 100% 75%, 100% 100%, 0 100%, 0 75%);

可以從圖上可以看到有五個點（可自行再刪減）

應用到專案上

專案上我們使用一個白底去產生此梯形效果

但發現會讓底色跑出來～所以最後把尺寸加到就藍底完全蓋掉

/* 讓第三個點超出空間讓底色藍可以完整不會出現 */

    clip-path: polygon(50% 100%, 100% 75%, 100% 101%, 0 100%, 0 75%);

網站：艾爾恩影片製作公司