Fluid CSS only shapes?

I was wondering if anyone knew of a technique for creating Fluid CSS shapes.

For example:



.banner{ border:50px solid pink; border-right-color:transparent;}

creates a simple split tail banner. However, I run into trouble if Iwant content inside that banner, and the height of the banner “split tail” co correspond with the included content. Even if do this:


.banner{ position:relative;}
.banner:after{ content:""; top:-50px; bottom:-50px;  left:100%; border:50px solid pink; border-right-color:transparent;}


The problem beign that the wedge no longer has a point as the content makes a flat edge between the borders wich would normaly create the illusion of the split tail. ( I hope I’m explaining myself clearly )
h Is this effect possible using just CSS?

as always, all input is appreciated.

Did you mean something like this Ray? Which came from [URL=“http://www.sitepoint.com/forums/css-53/using-borders-create-triangle-output-not-expanding-text-778514.html#post4943475”]this thread.

WOW Paul. Yeah that’s what I was aiming for. That was rather clever, It took me a bit to realize the trick. Thanks!

BTW…
was there a reason for:
p:after, .after { display: block;
overflow:hidden;
clear:both;}

it seems that since the pseudo element as AP those declarations would have no effect anyway…or is that to account for some odd browser?

Hi Ray,

Yes the display:block is for Safari because it has a bug with absolute elements placed using :after and only works reliably if you set them to display:block. This was a bug that cropped up in the crosshair css quiz and I’ve seen it a few times now so always include it as a default when absolute positioning using :after.

The clear:both is to counter a bug for ie7 and under when floats precede an absolute element and if the clear:both isn’t in place the absolute element may get misplaced so I tend to always include it now - just in case. It makes no difference to anyone else because it should be ignored.