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;
}