單一 div 的正多邊形變換 ( 純 CSS )

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

如果對於偽元素的應用有興趣的,也可以參考我之前的一些文章的啦!








以上就是純粹利用 CSS 做出來的單一 div 的正多邊形變換,如果熟練的話,其實加上動畫效果,就可以做出像下面範例這個樣子的變換動畫囉!不過下面的範例有再另外用一個 div 包在外面做大小的變換動畫,避免因為大小的變換造成銜接處的不密合,大家可以參考看看喔!( chrome 限定,範例:css-regular-polygon-transform-demo7.html )

單一 div 的正多邊形變換 ( 純 CSS )


其他與偽元素有關的 CSS 文章參考: