1) Kann ich nichts mit anfangen, also eigentlich genauso wenig wie du. Was CSS-Transforms sind ist eigentlich klar, aber wie man damit Dinge "abschneiden" soll, kann ich mir nicht denken.
2) Viel zu umständlich. Schmutziger Hack, um sich irgendwelche Formen zu basteln. Da würde ich lieber zu Bildern greifen.
3) Gradients sind eine gute Idee. Eine ziemlich gute. Man kann sie beliebig anpassen (wenn man sie versteht) und das mit den Ecken ist schon kein Problem mehr. Allerdings wird das Element als solches (das <div>) nicht abgeschnitten sondern nur der Hintergrund. box-shadow wird da zum Beispiel irgendeinen Bockmist fabrizieren, der zwar quadratisch ist aber bei solch einem Hintergrund nicht schön aussieht.
Ich verstehe allerdings nicht, warum du es nicht mit Bildern machen willst. Sicher, CSS ist toll und macht Spaß, weil es so dynamisch ist, aber auch CSS hat Grenzen. Und CSS3 wird auch noch nicht von allen Browsern vollständig unterstützt, weil es für gerade einmal 2 oder 3 Sektionen davon Standards gibt.
Übrigens würde ich es als Alternative mit einem zweiten Element (div) probieren, was die Ecke der Navibar überlagert. Das kannst du dann ein bisschen stylen und es sollte so aussehen wie auf den Bildern von 1). Schön ist das trotzdem nicht.
Für Mozilla...