之前一直很好奇有些網站的背景圖片是如何裁切成不同形狀的，
除了本來就放置裁切好的圖片以外不知道還有沒有別的作法？
結果昨天突然發現 clip-path 這個寫法。

使用時的注意事項

• 雖然目前基本上只有 IE 和 Opera 等瀏覽器不能支援外，其他除了 Fire Fox 外的瀏覽器建議加上 webkit 來撰寫。
• clip-path 可做到單一 div 繪製成多邊形的功能，像以前在 Day 2 提到的偽完素，是利用寬高來控制圖案，而clip-path 則是需要去控制它每個點的座標。
• 記得先定義好圖片的寬高。座標控制是以比例去計算，若沒先設定好的話畫出來的圖形可能會怪怪的 XD
• 座標設定須向同一個方向進行，這個圖形你決定用順時針就全部順時針、逆時針就全部逆時針。

各種形狀範例

平行四邊形

clip-path: polygon(第一點的 XY 軸座標, 第二點座標, 第三點座標, 第四點座標);

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

圓形

clip-path: circle(半徑 at 圓心座標);

-webkit-clip-path: circle(50% at 50% 50%);

橢圓形

clip-path: ellipse(短、長軸半徑 at 圓心座標);

-webkit-clip-path: ellipse(25% 40% at 50% 50%);

對話框

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

還有很多形狀可以發揮創意變換，
或是參考這個網站，可以更了解 X 軸及 Y 軸的設定方式。

最後的最後，第一次的鐵人賽，今天正式完賽啦！！！(灑花)
因為是第一次用這個平台寫作，回顧第一篇到現在寫作模式也有點不同了，實在是很有趣。
期間不僅複習了舊知識也學到的一些新的東西，三十天的挑戰真的是所謂甜蜜的負荷。

努力完賽的我，真了不起！！
繼續努力，快快達成短期目標吧:D