天給大家帶來的是兩款使用css3來創建的漂亮的圓形菜單。在這里主要分析一些基本的數學計算公式，數學不夠好？沒關系，這些公式都非常簡單，只要明白了做出來很容易。

數學計算公式：

最好的理解這些公式的方式是使用畫圖的方式來，先來看看每個扇形的角度是多少，下面是一張示意圖：

所以扇形的分布如上圖所示，我們的demo中有6個li，那么每個li的角度為：

180deg / 6 = 30deg

如果你想做一個完整的圓形，那么角度值為：

360deg / 6 = 60deg

以此類推，你可以計算出你想要的扇形角度。我們將在css中使用這些角度。

要創建一個剛好等于我們所需要的角度的扇形，可以使用skew（）來將它們傾斜。傾斜的值為：

90deg – x deg

這里的x為我們需要的角度。

這時候，列表中的所有li
都將因傾斜而產生扭曲，因此我們需要所有的a元素設置為不傾斜，

效果圖如下：

效果一

效果二

源碼部分：

效果一的HTML結構：

效果一的CSS樣式：

效果二的HTML結構：

效果二的CSS樣式：

給大家的兩點建議：

1. 初學者千萬不要著急看復雜的案例特效源碼，除了打擊大家的自信心，沒有其他好處了。

2. 遇到問題的時候，一定要追本溯源，及時解決眼前的問題，不然這個問題會一直纏繞著你，影響后面的學習效果。

由于源碼太多，影響展示效果，所以需要完整源碼和獲取更多內容的朋友敬請關注！

上圖所示，這是一個CSS3和SVG實現的圓形菜單。在圓環上一共有7個節點，表示菜單項，當鼠標滑過或者點擊其中一個節點時，就會彈出文字菜單項，圓環形狀和節點都是采用SVG繪制而成，動畫效果也非常不錯。