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

Question

[pxx]

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


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

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

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

PS: На всякий случай, требования к поддержке браузеров: IE 7+, FF 3.6+, Opera 11+, Safari 5+, Chrome.

Answer 1

[lashtal]

Треугольник легко делается на чистом цсс

Comments

[pxx]

Это круто, очень изящное решение. Учитывая, что ИЕ6 не будет, никаких проблемм с поддержкой background-color: transparent; Спасибо большое, пожалуй так и буду делать.

[pxx]

* Имел в виду не background-color, а border-color.

[lashtal]

ие6 кстати тоже работает: берется любой цвет бордера, и через filter: chroma(color=цвет) делается прозрачным. Правда, антиалиасинг вроде теряется, но не суть.

[ChemAli]

При некоторых значениях антиалиасинг «пропадает» и на ВебКите. Но можно подобрать чтобы было нормальненько.

Answer 2

[Jazzist]

Я бы сделал спрайт с прозрачностью PNG или GIF в divе.

На него легко можно повесить ссылку или асинхронный обработчик.

Answer 3

[Артур Кох]

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

Comments

[pxx]

Да, это первое, что приходит в голову, но есть проблемма: существование такого спрайта на практике невозможно, ибо цвет задается в админке и может в дальнейшем меняться редактором сайта.

[MT]

Можно генерировать Data-URI. (IE7 без стрелки переживёт.)

[MT]

Упс, темка-то старая.

Answer 4

[Кирилл Стряпонов]

dl.dropbox.com/u/10737647/block.zip Вот моя реализация. Тестировал на FF4, Chrome 10, Opera 11

Answer 5

[Дмитрий]

habrahabr.ru/blogs/css/136061/
habrahabr.ru/blogs/css/107259/
habrahabr.ru/blogs/css/135508/
habrahabr.ru/blogs/css/132283/

Comments

[ngreduce]

Мне кажется вы немного опоздали)