Iphone App Css

Out of all things in that conept from Miguel Olivares I was really interested in that "saw".

You can check current version here:
http://bit.ly/OP3aEz

I started with unsigned list and background image for "ul" tag, but it wasn't look good, since list items were drawn on top of background images. And so box shadows, which I was using to separate buttons, were drawn on top of triangles. Same was true for border-image technique.

Then I thought - maybe it will work if I will use multiple-background technique on list items (or actually styling tag inside of it). It was working, but with one hack. In order that thing to look good you need to set exact size of the button, so triangle tiles on background would connect properly at the point where buttons touch sides.
Not the best solution...

Next stop - wrapping buttons with two divs - for top and bottom "saws". Then setting negative margins and whoala - all effects and divs are under triangles. I also replaced unsigned list structure with divs, cause it was causing some strange effects.

That method also alowed me to add added simple,but nice toggle effect with jQuery.