Ich nenne die drei grossen Vierecke von oben nach unten A, B und C. Den linken Winkel 1 und den rechts stehenden Winkel 2.

1 und 2 sehen für mich aus wie Vierecke, die durch das darüber liegende B (mit weissem border) abgedeckt werden.

Das Überdecken kann man mit einem negativen margin-top machen.

Dabei kommt allerdings 2 z-index-mässig vor B und deckt es ab,es soll aber ja gerade umgekehrt sein.

Der z-index von 2 muss also kleiner sein als der von B. Und ein z-index lässt sich nur für positionierte Elemente setzen.

Du musst mal ausprobieren, ob es klappt, wenn du um 1, B und 2 ein relativ positioniertes Element (z.B. div) setzt. B braucht einen entsprechenden margin, um Abstand zu diesem Element zu schaffen. Und dorthinein positionierst du 1 absolut links oben und 2 absolut rechts unten.

Linuchs