CSS3 Circular Menu

Question

I've found this beautiful circular menu and I'm struggling to adapt it to my own needs.

I only need four items from that menu and their 'width' (horizontal space) should be increased.

I've put the original code in this fiddle. The version with four items is here.

As previously said, I'm trying to fill that empty space between by increasing their size because I'd like to fit more text in there.

Part of the CSS that I think it might be relevant:

.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

You just need to mess with the transform skew.

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

See this JSFiddle for the solution.

(P.S. That's a way cool menu animation!)