上一篇我們介紹瞭如何利用before和after偽元素來做Material Design風格的按鈕,裡頭關鍵的技術就在於活用邊框寬度和div本體寬高,因此這篇再加碼一個效果,就是純粹利用CSS,讓「單一個」div,從正三角形變換為正八邊形(單一div最多隻能做到正八邊形),最後再搭配動畫的效果,變成正多邊形的變換動畫,也由於正多邊形需要用到不少的三角函數計算,為了方便起見,這裡將正多邊形的邊統一都設為100px。
正三角形
正三角形不需要用到偽元素,只需要設定div本身的邊框寬度即可產生,先來看一下正三角形的邊長與中線,若邊長為100px,則中線四捨五入就是87px(100 x sin(60)= 87)。