Menu Thông tư CSS3

Question

Tôi đã tìm thấy this menu tròn đẹp và tôi đang cố gắng thích nghi với nhu cầu của riêng mình.

Tôi chỉ cần bốn mục từ trình đơn đó và 'chiều rộng' của chúng (không gian ngang) sẽ được tăng lên.

Tôi đã đặt mã gốc vào số fiddle này. Phiên bản có bốn mục là here.

Như đã nói, tôi đang cố gắng lấp đầy khoảng trống đó bằng cách tăng kích thước của chúng bởi vì tôi muốn vừa với nhiều văn bản hơn trong đó.

Một phần của CSS mà tôi nghĩ rằng nó có thể có liên quan:

.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

Bạn chỉ cần gây rối với các transformskew.

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

Xem phần này JSFiddle để biết giải pháp.

(T.B. Đó là một cách mát mẻ hình ảnh động đơn!)