Diagonale Akkordeon-Teiler und schräger Textfluss

Fiddle (möglicherweise müssen Sie den Ergebnisbereich anpassen): Ссылка

Ziel:

Problem:

0) Wie Sie sehen, bin ich im Grafikdesign viel besser als im Code.

1) Ich versuche, die Akkordeon-Tabs diagonal zu haben (derzeit kann ich es sauber mit vertikalen divs arbeiten), aber kurz vor der Erstellung eines riesigen Bildes kann ich keine auflösungsunabhängige Art und Weise finden, dies zu tun. Die Verwendung von Farbverläufen funktioniert nicht, da ich Box-Schatten verwende und eine transparente Umrandung zeigt. CSS-Transformationen ergeben auch weniger als optimale Ergebnisse, mit oder ohne zAccordion (ich habe sie in der Fiddle auskommentiert).

2) Ich möchte CSS-Textflüsse wie im unteren Bild. Ich habe CSS Text Wrapper gefunden, der nicht ideal ist, und eine Fiddle, die an anderer Stelle hier wie folgt gepostet wird, was wiederum weniger als ideale Ergebnisse liefert und derzeit nicht in dem Fiddle pending ersten Problem gelöst ist:

Wenn mir jemand in die richtige Richtung zeigen könnte, wäre ich ewig dankbar.