Главное меню ромба

Question

Я пытаюсь создать меню ссылок в стиле Rhombus, которое перемещается горизонтально по странице. У меня также есть некоторые сноски сценария java на этом. \ \ \ \ \

Я использую атрибуты skew css3 на divs, но они искажают текст, а также есть способ un un -Сколько текст в div? ive попробовал div в div, но не повезло. И как я могу заставить это работать в ie7/8?

<div id="menu"> 
       <div class="MenuOptions"><div class= "menuRot"><a>Menu</a></div></div> 
       <div class="MenuOptions"></div> 
       <div class="MenuOptions">Menu 3</div> 
       <div class="MenuOptions">Menu 4</div> 
       <div class="MenuOptions">Menu 5</div> 
       <div class="MenuOptions">Menu 6</div> 
    </div> 

**CSS** 

.MenuOptions{ 

    height:50px; 
    width: 100px; 
    float: left; 
    position: relative; 
    transform: skew(35deg); 
    -webkit-transform: skew(35deg); 
    -moz-transform: skew(35deg); 
    -ms-transform: skew(35deg); 
    -o-transform: skew(35deg); 
    border: 1px solid red; 
    background-color: #d6dd31; 
}​ 
.menuRot{ 
    transform: skew(-35deg); 
    -webkit-transform: skew(-35deg); 
    -moz-transform: skew(-35deg); 
    -ms-transform: skew(-35deg); 
    -o-transform: skew(-35deg); 
} 

Большое спасибо

Answer 1

Ваш код работает. Я скопировал свой код и проверил его с поджигатель и нашел что-то странное ...

Заменить CSS с этим.

.MenuOptions{ 

    height:50px; 
    width: 100px; 
    float: left; 
    position: relative; 
    transform: skew(35deg); 
    -webkit-transform: skew(35deg); 
    -moz-transform: skew(35deg); 
    -ms-transform: skew(35deg); 
    -o-transform: skew(35deg); 
    border: 1px solid red; 
    background-color: #d6dd31; 
} 

.menuRot{ 
    transform: skew(-35deg); 
    -webkit-transform: skew(-35deg); 
    -moz-transform: skew(-35deg); 
    -ms-transform: skew(-35deg); 
    -o-transform: skew(-35deg); 
}