Zubzob Zubzob - 1 year ago 183
CSS Question

CSS3 Circular Menu

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 Source

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!)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download