Фон навигации в виде параллелограмма с помощью CSS

Я пытаюсь создать это навигационное меню (зеленое выделение — активная страница, серое — состояние наведения):

Меню навигации

Я могу сделать параллелограмм с помощью следующего CSS:

ul#nav li a {
    text-decoration:none;
    padding:4px 10px;
    border-radius:3px;
    transform: skew(-10deg);
    -o-transform: skew(-10deg);
    -moz-transform: skew(-10deg);
    -webkit-transform: skew(-10deg);
    color:#757575;
}

ul#nav li a:hover {
    background:#f3f1eb;
}

ul#nav li a.current-menu-item {
    color:#fff;
    background:#5d9732;
}

ul#nav li a.current-menu-item:hover {
    background:#5d9732;
}

К сожалению, это также приводит к перекосу текста и выделению его курсивом:

Меню навигации перекошено

Вот jsfiddle, показывающий настройку (хотя перекос не работает в jsfiddle): http://jsfiddle.net/K3bQJ/4/

Есть ли способ предотвратить перекос текста, чтобы он не отображался курсивом? Я загружаю jQuery, но предпочел бы избежать этого или, по крайней мере, использовать запасной вариант CSS.

Спасибо за любой совет!


css background nav
person R.J.    schedule 10.07.2012    source источник
comment
На будущее: cssdesk.com предназначен только для CSS и HTML без компонента Javascript. Я думаю, что это довольно хорошо для такого рода испытаний.   -  person TheZ    schedule 10.07.2012
comment
Я не могу проверить это прямо сейчас, но как насчет того, чтобы поместить визуальные эффекты в элемент li, такие как цвет фона и преобразование, а затем установить преобразование: ни один элемент привязки?   -  person Henrik Janbell    schedule 10.07.2012
comment
Примените display: inline-block; в jsFiddle. jsfiddle.net/K3bQJ/5   -  person    schedule 10.07.2012
comment
Интересная проблема. Знаешь, иногда действительно круто просто использовать и изображать :)   -  person Jezen Thomas    schedule 10.07.2012
comment
+1 Примечание: альтернативный метод навигации CSS3 с использованием стрелок см. в моем Ответ SO. Ваше здоровье!   -  person arttronics    schedule 25.07.2012

Ответы (1)


arrow_upward
14
arrow_downward

Попробуйте это Добавьте диапазон внутри ваших тегов и установите его наклон в противоположном направлении (обратите внимание на использование skewX что считается правильным в соответствии с https://developer.mozilla.org/en/CSS/-moz-transform)

<ul id="nav">
    <li><a class="current-menu-item" href="#"><span>Nav Item 1</span></a></li>
<li><a href="#"><span>Nav Item 2</span></a></li>
<li><a href="#"><span>Nav Item 3</span></a></li>
</ul>

ul#nav li a {
    display: inline-block;
    text-decoration:none;
    padding:4px 10px;
    border-radius:3px;
            transform: skewX(-10deg);
         -o-transform: skewX(-10deg);
       -moz-transform: skewX(-10deg);
    -webkit-transform: skewX(-10deg);
    color:#757575;
}

ul#nav li a span {
    display: inline-block;
            transform: skewX(10deg);
         -o-transform: skewX(10deg);
       -moz-transform: skewX(10deg);
    -webkit-transform: skewX(10deg);
}
person Jason Sperske    schedule 10.07.2012
comment
У меня была такая же мысль, за исключением того, что попробовал ее на a вместо переноса с помощью диапазона. - person ayyp; 10.07.2012
comment
Отлично, это работает! Я просто добавил стили фона к элементу li вместо элемента a, чтобы избежать добавления дополнительной разметки, а затем установил обратный наклон для элемента привязки. Спасибо большое! - person R.J.; 10.07.2012
comment
Согласно developer.mozilla.org/en/CSS/-moz-transform вы не должны использовать skew(), а вместо этого укажите предполагаемую ось, которую вы пытаетесь наклонить (в данном случае skewX()). Я обновил ссылку cssdesk.com - person Jason Sperske; 14.07.2012
comment
+1 Отличный ответ. К вашему сведению: последний комментарий, который вы сделали, Джейсон, важен, поскольку Firefox v14 отказался от преобразования skew(). Я думаю, что ваша демонстрация cssdesk.com также должна быть частью вашего ответа. Ваше здоровье! - person arttronics; 25.07.2012