[ Day 30 | CSS ] 用 clip-path 绘制多边形

之前一直很好奇有些网站的背景图片是如何裁切成不同形状的，
除了本来就放置裁切好的图片以外不知道还有没有别的作法？
结果昨天突然发现 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