CSS3圆形菜单

Question

我发现this漂亮的圆形菜单，但我正在努力使其适应自己的需求。

我只需要菜单中的四个项目，它们的'宽度'（水平空间）应该增加。

我已将原始代码放在此fiddle中。有四个项目的版本是here。

如前所述，我想通过增加它们的大小来填充两者之间的空白，因为我想在其中容纳更多文本。

我认为可能与CSS相关的部分：

.csstransforms .cn-wrapper li {
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    margin-top: -1.3em;
    margin-left: -10em;
    width: 10em;
    height: 10em;
    font-size: 1.5em;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    transition: all .3s ease;
    -webkit-transform: rotate(76deg) skew(60deg);
    -moz-transform: rotate(76deg) skew(60deg);
    -ms-transform: rotate(76deg) skew(60deg);
    transform: rotate(76deg) skew(60deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    pointer-events: none;
}

Answer 1

您只需要弄乱transform skew。

transform: rotate(...) skew(40deg);

请参阅此JSFiddle以获取解决方案。

（P.S。这是一种很酷的菜单动画！）

Answer 2

下面提供了圆形菜单项/列表的链接

Circular menu items