上一篇我們介紹了如何利用before和after偽元素來做Material Design風格的按鈕，里頭關鍵的技術就在于活用邊框寬度和div本體寬高，因此這篇再加碼一個效果，就是純粹利用CSS，讓“單一個”div，從正三角形變換為正八邊形（單一div最多只能做到正八邊形），最后再搭配動畫的效果，變成正多邊形的變換動畫，也由于正多邊形需要用到不少的三角函數計算，為了方便起見，這里將正多邊形的邊統一都設為100px。

正三角形

正三角形不需要用到偽元素，只需要設定div本身的邊框寬度即可產生，先來看一下正三角形的邊長與中線，若邊長為100px，則中線四舍五入就是87px（100 x sin（60）= 87）。

因此我們要將div的長寬都設為0，接著把底部border的寬度設為87px，左右的border寬度設為50px（顏色設為透明transparent），就可以做出一個漂亮的三角形。

width:0;height:0;border-width:0 50px 87px ;border-style:solid;border-color:transparent transparent #095;

正方形

正方形應該是最簡單的，只要設定長寬設定為同樣數值就可以了，不過其實還有另外兩種方法，第一種你可以把長寬設為0，把上下左右的border設為50px也可以，第二種則是高度設為0，寬度設為100px，然后某個邊寬也設為100，都是可以的。

.a{width:100px;height:100px;background:#c00;}.b{width:0;height:0;border-width:50px;border-style:solid;border-color:#095;}.c{width:100px;height:0;border-width:0 0 100px;border-style:solid;border-color:#069;}

正五邊形

正五邊形就需要進入基本的三角函數領域了，讓我們先把正五邊形分解，用原本的div作為上方的三角形，然后用一個偽元素制作下方的梯形，因為正五邊形每邊的夾角為108度，所以可以藉由三角函數計算出上方三角形的高度為59px（100 x cos（54）），寬度為192px（100x sin（54）x 2），下方梯形的高度為95px（100 x sin（72）），長邊的寬度跟上面的三角形一樣都是192px。

了解原理之后，就可以利用偽元素來搭配制作