利用CSS3 clip-path绘製不规则形状

製作网页的过程，如需要一些特殊形状(梯形、椭圆形、不规则多边形)，一般会想到使用SVG来处理，但有时我们只是需要简单的形状，而且学习SVG是有门槛存在的，这时，可以利用CSS3的clip-path来绘製较複杂的形状。

以下的教学会配合https://bennettfeely.com/clippy/，这个非常好的网站来教学。

我们可以藉由拖拉的方式，绘製所需的图型，然后将产生的CSS程式码直接套用在自己的网页上。

进入网站，一开始会看到三角形的图案，下面黑色区块就是CSS程式码。

图型产生的原理

藉由座标位置的点，点与点连成线，再由线所围成的範围，来完成的。
以上图三角形为例，红点对应CSS红色程式码，绿点对应绿色，黄点对应黄色。
并且按照逆时针的方向，将点线面所围起来的区域，就是我们要的三角形。

判断座标位置

我们所绘製的图型，会限定在一个区块内，而这个区块通常会是DIV元素。
DIV元素所产生的区块会是方形，有4个角。
以左上角为X、Y轴的起始点(X Y)。
X轴是水平，Y轴是垂直。

红点位置为起始点(0 0)。
绿点位置位于X轴最左边，Y轴最下面，所以是(0% 100%)。
黄点位置位于X轴最右边，Y轴最下面，所以是(100% 100%)。
这样应该很好理解。

那如果是等腰三角形呢？

很简单，唯一会移动的只有红点。
将它移动到X轴的中央(50% 0)，就会产生等腰三角形了。

产生多边形

以梯形为例，多了一点(蓝点)，同样地，以红点为起始点，这次是顺时针，依序为红、绿、黄、蓝。
红点像右移动了20%的位置，绿点向右移动了80%的位置。黄、蓝则是位于最角落。
由这4点顺时针所围成的区域，就是梯形。

顺时针、逆时针

从一开始就一直出现顺时针或逆时针，那是因为当你决定一个方向时，就应当按照当初所订定的方向围绕。
不然会出现非预期的形状。
譬如，如果将黄、蓝的位置对调，就会变成这样。

程式码是按照红、绿、黄、蓝排下来的，所以线的连结，绿点之后是接黄点，类似阿拉伯数字的8。
最后一点(蓝)，结束之后，自然会连回红点，才能围成一个封闭区域。

更複杂的多边形

并非所有的点，都要在框框的边界上。
我们可以在範围内，订定任何位置的点。

这是由红点出发，顺时针所围成的箭头。
绿点跟白点，就不是在边界上了。

圆形

相对于多边形，圆形简单许多。

绿点，圆心位置。
红点，半径大小。
一样都是由百分比来表示的。