摘要：在之前所提到繪制正多邊形的方法，算是純粹利用偽元素來完成，不過坦白說還有另外一種方法，可以將單一做更多形狀的變換，這種方法就是的，這個看起來有點眼熟，因為它原本就存在于里頭，利用掩碼剪裁的方法，連接坐標繪制掩碼區域，就可以做出許多不同的

在之前所提到繪制正多邊形的方法，算是純粹利用偽元素來完成，不過坦白說還有另外一種方法，可以將單一div做更多形狀的變換，這種方法就是CSS3的“clip-path”，這個“clip-path”看起來有點眼熟，因為它原本就存在于SVG里頭，利用掩碼（剪裁）的方法，連接坐標繪制掩碼區域，就可以做出許多不同的形狀，讓底色或底圖顯現，隨著瀏覽器對于CSS3的支持度大幅提升，自然而然的就可以用它來做些與眾不同的變化。

最先看到這個屬性的應用，是從這個網站看到的：http://species-in-pieces.com/，不得不說這個網站做得實在太神了，一開始看到還真以為是用SVG做的，沒想到竟然是用CSS刻出來的…真是太驚人啦！

接著在找數據的過程中，又發現一個很強的網站：http://bennettfeely.com/clippy/，專門介紹「clip-path」這個CSS3的屬性，你可以直接在上面拖拉或修改，除了貝茲曲線外，幾乎任何形狀都做得出來（中空的部分要用組合的）

如果不考慮一些瀏覽器支持度的問題，使用clip-path來繪制多邊形，還比利用偽元素還制作多邊形來得簡單許多，而且也可以做到單一div繪制超過八邊形，使用偽元素的繪制是直接從長寬著手，而利用clip-path則是要由每個點的坐標著手，因為是座標點的緣故，要做出正多邊形就也同樣要用到許多基本的三角函式來計算坐標，以下就利用clip-path來繪制圓形、橢圓和正多邊形給大家看看。

開始繪制之前，有兩點注意事項：

使用clip-path要從同一個方向繪制，如果順時針繪制就一律順時針，逆時針就一律逆時針，因為polygon是一個連續的線段，若線段彼此有交集，面積區域就會有相減的狀況發生（當然如果這是你要的效果就無妨了）。
如果繪制時采用「比例」的方式繪制，長寬就必須要先行設定，不然有可能繪制出來的長寬和我們想像的就會有落差，使用「像素」繪制就沒有這種問題。

.circle{
    width:100px;
    height:100px;
    background:#0cc;
    -webkit-clip-path:circle(50% at 50% 50%);
  }

 .ellipse{
    width:100px;
    height:100px;
    background:#aaa;
    -webkit-clip-path:ellipse(25% 50% at 50% 50%);
  }

）

.inset{
    width:100px;
    height:100px;
    background:#99f;
    -webkit-clip-path:inset(10px 20px 30px 10px round 20px 5px 50px 0);
  }

 .a{
    width:100px;
    height:87px;
    background:#c00;
    -webkit-clip-path:polygon(0% 100%, 50%  0%,100% 100%);
  }

.b{
    width:100px;
    height:100px;
    background:#069;
    -webkit-clip-path:polygon(0% 0%, 0% 100%,100% 100%,100% 0%);
  }

正五邊形就要計算一下了，59/（59+95）=38.31%，31/（81*2）=19.14%

.c{
    width:162px;
    height:154px;
    background:#095;
    -webkit-clip-path:polygon(0% 38.31%, 50% 0%,100% 38.31%,80.86% 100%,19.14% 100%);
  }

正六邊形的計算比較簡單，50/（100+502）=25%，150/（100+502）=75%

.d{
    width:200px;
    height:174px;
    background:#f80;
    -webkit-clip-path:polygon(25% 0%, 75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  }

正七邊形是這里頭需要計算最多的形狀，22/（100+622）=10.09%，202/（100+622）=90.18%，43/（43+97+78）=19.72%，（43+97）/（43+97+78）=64.22%，62/（100+622）=27.68%，（100+62）/（100+622）=72.32%

.e{
    width:224px;
    height:218px;
    background:#09c;
    -webkit-clip-path:polygon(50% 0%, 90.18% 19.72%,100% 64.22%,72.32% 100%,27.68% 100%,0% 64.22%,10.09% 19.72%);
  }

正八邊形的計算如下，71/（100+712）=29.34%，（71+100）/（100+712）=70.66%

.f{
    width:242px;
    height:242px;
    background:#f69;
    -webkit-clip-path:polygon(29.34% 0%, 70.66% 0%,100% 29.34%,100% 70.66%,70.66% 100%,29.34% 100%,0% 70.66%,0% 29.34%);
  }

熟練了clip-path之后，當然就要用它來做點動畫，下面提供兩個示例，第一個是正多邊形的變換，第二個則是三角形的變換組合，雖然看起來很簡單，但實際制作起來卻要考慮每個點的坐標，為了讓形狀不要有「翻轉」的錯覺，形狀里頭每個點在進行移動的時候，盡可能的不要交錯，因為只要一交錯，就會有交集的空白產生，就會有不自然或是翻轉的現象喔！當然同樣的，如果你希望有翻轉的效果，應該就要讓他們交錯啰！

需要以上兩個動畫的代碼可以加我：