Example Pt #3 : The Bottom Right
Now we have to get crafty to get the bottom right.
In theory we do have some markup down there to 'hang' our corner on -- the lowest <p> in this DIV or the <H5> link in the right hand box. The problem is we've got too many. If we add the graphic to one <p>, we add it to all of them.
If 'last-child' was supported we'd be laughing, but no cigar there.
What if... we did add the corner to every <p> but used some extra padding and some negative margin on the bottom to make them overlap just enough to hide the corner? Like overlapping playing cards, the bottom <p> would be the only one we could see all of.
So, if our corner graphic is 26px high, a -26px margin on the bottom of the <p> should allow it to tuck under the object below it (see diagram).
div.rounded p{
background-color :#fffff1;
background-image : url(br.gif);
background-repeat : no-repeat;
background-postion : bottom right;
padding:1em 2em 26px 3px;
margin:0 0 -26px 25px
line-height:1.2;
}
Our only issue then is the lower <p> is obscuring some of the text in the <p> above it. Fortunately, this is easily solved by the simple addition of 26px of PADDING to the bottom of our <p>, pushing our text clear of our overlap.
Having applied these rules to the <p>, there's no reason why we can't just as easily apply them to any other element we might expect to put at the bottom of our box -- I've given all H5s the margin magic so I can use them with 'Continue' links (as in the right box).
As you can see, I've also tweaked the other padding and margin settings to make the them look nice.
OK, that's three corners.
