Фигура при наведении

[Linblack]

Наглядный пример того что нужно:

http://cs418420.vk.me/v418420741/5d8a/Qohsx-N0BUM.jpg

как это сделать без использования картинок и скриптов?

возможно ли вообще?

уточню. на картинке горизонтальное меню.

[Zippovich]

само меню можно без картинок и скриптов

а header для меню понадобится, как минимум бекграунд картинкой

[Switch74]

изучайте

http://habrahabr.ru/post/126207/

[npofopr]

сходите на http://codepen.io/

вбейте там в поиск слово menu и найдете реализацию.

[Zippovich]

а при чем здесь фигуры? там лучше все таки бекграундом, т.к. бекграунд - не однородный цвет

хотя можно еще примерно так, если без картинки как файла хотите обойтись:

{ background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom}

[Switch74]

уточню. на картинке горизонтальное меню.

не заметил там неоднородного фона, но возможно это монитор у меня так плохо показывает

[Zippovich]

а да - торможу

[Linblack]

.menu1 li a:hover {color:#ffffff; background:#000000;}

#parallelogram { width: 150px; height: 100px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); background: red; }

выходящий вопрос, как вписать стиль в стиль? %)

[Zippovich]

как вписать стиль в стиль?

не понятно что Вы спрашиваете

[Linblack]

да исковрекал)

menu1 этим обозначено то, что будет при наведении. это один стиль.

параллелограммом обозначен собственно параллелограмм, который представляет собой другой стиль.

как второе вписать на место background:#000000;?

просто не представляю

[Zippovich]

ну заменить наверное одно на другое?

Ctrl+C - Ctrl+V - не понятно что Вы спрашиваете, как один текст заменить другим?

Edited April 9, 2013 by Zippovich

[Switch74]

я так понимаю, что #parallelogram - это div наверно, впишите этот div в ссылку как абсолутный и он будет у вас в ней отображаться

[Linblack]

О_О все так просто? обалдеть просто.

просто тупо весь код туда скопировать..

[Zippovich]

ну див в ссылку лучше не впихивать, замените спаном

[Linblack]

вот только текст искажает. наклоняет...

.menu1 li a:hover {color:#ffffff; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); background: black;}

так вот)

[Zippovich]

да сделайте как switch сказал - абсолютный спан в ссылке, основной контент над ним расположите, а этот спан показывайте или убирайте на a:hover

[Switch74]

ну див в ссылку лучше не впихивать, замените спаном

а смысл от спана, если чтобы ему задать размер вам придется сделать его блочным?

вот только текст искажает. наклоняет...

.menu1 li a:hover {color:#ffffff; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); background: black;}

так вот)

по этому я и предположил, что вы фон будете делать другим объектом внутри ссылки, а не искажать всю ссылку с ее содержимым

и я бы на ховер повешал изменение цвета фона, а не изменение формы объекта

Edited April 9, 2013 by Switch74

[Zippovich]

а смысл от спана, если чтобы ему задать размер вам придется сделать его блочным?

это не валидно

[Linblack]

ндам. не все так просто..

"фон будете делать другим объектом внутри ссылки" подскажите как ссылку сделать? никогда такого не делал еще.

[Zippovich]

<a href="#"><span class="parallelogram"></span><span>текст ссылки</span></a>

a {position: relative}

a span {position: relative; z-index: 5}
a span.parallelogram {position: absolute;-webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); background: black; width: 100%; height: 100%; top: 0; left: 0; display: none
a:hover span.{display: block}

Edited April 9, 2013 by Zippovich

[Switch74]

опять опередил меня

а у меня вот такое получилось

http://jsfiddle.net/a9Mre/

[Linblack]

я с вами точно спать не лягу сегодня)

свич глянь дургую тему, последний штрих остался.

спасибо помогли очень.