Что касается жизни, я не могу понять: как создать CSS-меню со скошенной вкладкой?

Question

Примерно так:

http://www.cssplay.co.uk/menus/slanty.html

Но ...

• Вся форма вкладки должна быть интерактивной, включая все четыреуглы.В примере CSSPlay, наведите курсор мыши на верхний правый угол «Longer Item Three» и переместите его прямо вниз, чтобы закончить, наведя курсор мыши на нижний левый угол «Four».Как видите, верхний правый угол «Longer Item Three» не меняет цвет фона и не реагирует на нажатия, в то время как нижний левый угол «Four» имеет значение.Эффект, который я хотел бы получить, заключается в том, что любой угол должен быть активным / кликабельным в зависимости от того, на какой вкладке / форме вы находитесь.Каждая вкладка должна быть непосредственно рядом друг с другом с серой наклонной разделительной линией в 1 пиксель между каждой, без пробелов между

• Как можно меньше раздувания, насколько это семантически возможно.В примере CSSPlay есть несколько тегов, которые не являются семантическими.

• Я бы хотел использовать разные цвета градиента фона изображения для каждой вкладки, например.первая вкладка - красный градиент, вторая - синий градиент.

• Нужно быть CSS2 для поддержки большего количества браузеров

Кто-нибудь знает как?Вечная благодарность и будет твоей!Возможно ли то, что я прошу?

Answer 1

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

Непрямоугольные ссылки возможны только с:

• Преобразования CSS - возможно только при Браузеры с поддержкой CSS3 (IE9 Beta; Opera, Webkit и Firefox в своих последние воплощения.

• Карты изображений - не очень хорошо для SEO или код чистота / расширяемость.

• много дополнительной разметки - ну, вы видел раствор Стю Николса.

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

http://jsfiddle.net/prfez/

В этом конкретном решении у вас не может быть фонового изображения за навигацией, поскольку «поля» - это один спрайт изображения, маскирующий прямоугольные углы градиента.

Вы также не можете применить эффект наведения на фон, так как фон применяется к ul вместо li.

Преимущество в том, что html - это именно то, что вы ожидаете от навигации.

Пожалуйста, обратите внимание, что фоновый градиент ul должен быть заменен фоновым изображением, чтобы он работал в IE. И я тестировал только на Chrome.