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

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


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

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

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

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

На него легко можно повесить ссылку или асинхронный обработчик.
Ответ написан
dudeonthehorse
@dudeonthehorse
Email Developer
Не скажу, что мой способ лучше, ибо не так силен в js, но я бы в абсолютный div.corner повесил спрайт со стрелочками. Цвет стрелки меняем изменением позиции спрайта путем присвоения доп. класса(red, green, grey...)
Ответ написан
Ваш ответ на вопрос

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

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