利用CSS繪製更多形狀－CSS3的clip-path屬性

通常我們在設計網頁切版時，很少會切不規則的形狀，但現在可以透過CSS設定來給圖片作多種形狀的繪製了唷！但是在數值的設定上太過複雜而難以上手怎麼辦呢？別擔心，有個線上繪製器可以直接使用喔！只要利用CSS clip-path maker設定clip-path屬性，就可輕鬆產出自己想要的形狀了唷！

首先我們到CSS clip-path maker網站：http://bennettfeely.com/clippy/

右邊有許多現成的幾何形狀可以選擇。

下方有尺寸的設定並提供了一些背景圖片做參考。

可以先在右邊填上尺寸，再選好想要的形狀後，依自己需求調整錨點以改變輪廓。

調整好了之後複製最下方的原始碼，加上尺寸(width和 height)的數值，就可以使用了。

範例：

利用此項線上工具可以對背景圖片快速地進行裁切，增添網頁設計上排版的趣味度和豐富性，不妨嘗試使用看看喔！