HTML+CSS: Layout of non-rectangular, "overhanging" element

Question

css

There is a task to make up such a block:


It seems to be nothing complicated, if not for some "buts":
1. The site will have a non-constant number of sections / sections, each of which will have its own heading color.
2. The color for each section will be set through the admin panel. For example, as a string #RRGGBB.
3. There will be several types of similar blocks, of different widths, with different main content.

There are no problems with the corners, with the backing for the date too, but the overhanging arrow has been tormenting me for the second day. I can't think of a nice way to implement it with minimal problems when changing or adding new colors. So far, I have only come to such a solution , which in this particular case works well.

Tell me, how good is this method and is there a better, easier, more semantic option?

PS: Just in case, browser support requirements: IE 7+, FF 3.6+, Opera 11+, Safari 5+, Chrome.

Answer 1

The triangle is easy to make on pure css

Answer 2

I would make a PNG or GIF transparency sprite in a div.
You can easily attach a link or an asynchronous handler to it.

Answer 3

I won’t say that my way is better, because I’m not so strong in js, but I would hang a sprite with arrows in the absolute div.corner. We change the color of the arrow by changing the position of the sprite by assigning additional. class(red, green, grey...)

Answer 4

dl.dropbox.com/u/10737647/block.zip Here is my implementation. Tested on 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/