title: CSS3 Circular Menu
body: <p>I've found <a href="http://tympanus.net/Tutorials/CircularNavigation/index2.html" rel="nofollow">this</a> beautiful circular menu and I'm struggling to adapt it to my own needs.</p>
  
  <p>I only need four items from that menu and their 'width' (horizontal space) should be increased.</p>
  
  <p>I've put the original code in this <a href="http://jsfiddle.net/SNrAF/" rel="nofollow">fiddle</a>. The version with four items is <a href="http://jsfiddle.net/SNrAF/1/" rel="nofollow">here</a>.</p>
  
  <p>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.</p>
  
  <p>Part of the CSS that I think it might be relevant:</p>
  
  <pre><code>.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;
  }
  </code></pre>