Есть два рисунка фона ( только одинакового размера)
[attachment=38713:menu.png] и [attachment=38714:menu_active.png]
При наведении одна картинка меняет другую, а "косые правые и левые бордеры" просто нарисованы. В действительности всё "нарезано" "прямоугольно-перпендикулярно"
[CSS].topmenu
{
background-image:url(/images/menu.phg);
}
.topmenu:hover
{
background-image:url(/images/menu_active.png);[/CSS]
}

как вариант - вырезать прозрачные PNG и смещать отрицательным маргином влево

Спасибо Bugnet. Всё действительно оказалось просто. Но у меня по ходу верстки возник ещё один вопрос. Для того, что бы вы поняли в чём дело, мне нужно немного расказать о том, как я начал верстать эту менюху.

HTML:


CSS:
[CSS]
ul{
margin: 0;
padding: 0;
list-style: none;
float:right;
}

#main_menu ul li {
float:right;
outline:1px solid #FCF;
}
#main_menu ul li a {
color:#ffffff;
text-decoration:none;
padding:13px 10px 0 10px;
font-family:Verdana, Geneva, sans-serif;
font-size:16px;
font-weight:bold;
height:33px;
display:block;
outline:1px solid #69F;
}
[/CSS]

В чём собственно вопрос... Как вы видите, я сделал ссылки блочными элементами, что бы иметь возможность подогнать верстку под дизайн. Метод я выбрал именно тот, который подсказал Bugnet.
Собственно сейчас я планировал разрезать менюху на отдельные элементы (соответствующие разделам меню) и поместить их с помощью background-image:url();
Замешательство вызвали РАЗНЫЕ РАЗМЕРЫ БЛОКОВ <a>. Это чтож получается, что мне нужно для каждого отдельного блока <a> (для каждого отдельного пункта меню) прописывать свои правила для всех трех событий (стандартного, hover and action) ??? Поскольку то размеры каждого отдельного блока разные то... (см. картинку в первом сообщении) Чтож получается, нужно каждому отдельному блоку присваивать id="" и прописывать для каждого правила (да ещё и по три раза) и всё из за разных размеров блоков меню ???

Ясно же, что я мыслю как-то не так ))) Наверное же есть другой способ. Картинка с изображением менюхи есть в первой посте темы.

я думаю что надо нарисовать универсальный фон типа такого [==========> (длиной как максимальный пункт меню, а можно и больше) и этому фону прописать position - right, справа углы вне стрелочки прозрачные
получитсятипа [=The App=>[=Games=>[=FAQ=>[=Contact=> и сместить их отрицательным марджином вправо чтоб позалазили друг на друга
только первому и последнему пункту меню нужны будут особыестили

Замечание модератора: Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней. Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой или обратитесь к любому из модераторов.