HTML+CSS: Верстка непрямоугольного, "нависающего" элемента

Существует задача сверстать вот такой блок:


Вроде бы ничего сложного, если бы не некотрые «но»:
1. На сайте будет неконстантное количество секций/разделов, каждый из которых будет иметь свой цвет заголовка.
2. Цвет для каждой секции будет задаваться через админку. Например в виде строки #RRGGBB.
3. Подобных блоков будет несколько видов, разной ширины, с разным основным контентом.

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

Подскажите, насколько хорош такой способ и нет ли варианта лучше, легче, семантичнее?

PS: На всякий случай, требования к поддержке браузеров: IE 7+, FF 3.6+, Opera 11+, Safari 5+, Chrome.
  • Вопрос задан
  • 3257 просмотров
Решения вопроса 1
lashtal
@lashtal
Треугольник легко делается на чистом цсс
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
@Jazzist
Я бы сделал спрайт с прозрачностью PNG или GIF в divе.

На него легко можно повесить ссылку или асинхронный обработчик.
Ответ написан
Комментировать
dudeonthehorse
@dudeonthehorse
Email Developer
Не скажу, что мой способ лучше, ибо не так силен в js, но я бы в абсолютный div.corner повесил спрайт со стрелочками. Цвет стрелки меняем изменением позиции спрайта путем присвоения доп. класса(red, green, grey...)
Ответ написан
stryaponoff
@stryaponoff
PHP developer
dl.dropbox.com/u/10737647/block.zip Вот моя реализация. Тестировал на FF4, Chrome 10, Opera 11
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы