How would you code this: Grid-breaking shapes

Answer 1

If you look at your mockup the Header Panel includes the height from the top of the green box to the bottom of the box.

background: green url(images/header-bottom.jpg) no-repeat bottom left;

That jpg file includes that last 70 of so pixels in height including the whole arrow. Since your header and navigation are below where that arrow goes the containers will be exactly how you show it.

This also enables you to have Submenu and Content to just have background colors since the only gradient you seem to have in those two regions are in the same zone as the arrow in Header Panel.

Answer 2

You could make a rectangle image which is wide and short to handle it. Use the same colors as the rest of the page so that it blends in. Check it in all browsers to make sure the image renders the same as the html colors. With some image formats this is not the case at least in some browsers.