Der Martin: grafisches fenster aus 9 teilen mit CSS

Beitrag lesen

Hallo,

* Ecke links oben enthält auch noch die linke und die obere Kante
* Ecke rechts unten enthält auch noch die rechte und die untere Kante

Ich würde die jewils die Ecken und Kanten zusammenfassen.
Eine grafik sieht etwa so aus

/\ /

Die andere so
_
| |
¯

dann verzerrt's dir aber beim Skalieren des Containers die Rahmen, denn du musst bei deiner Version die Grafiken mitskalieren (damit fällt auch die Lösungsvariante mit den Hintergrundbildern weg). Bei meinem Ansatz dagegen skalieren ich keine Grafik, sondern verschiebe sie nur gegeneinander wie zwei Winkel, die man übereinanderschiebt:


   ╔═════════════════════
   ║              ║
   ║              ║
   ║              ║
   ║              ║
  ═║══════════════╝
   ║

Die überstehenden Schenkel lässt man dann mit overflow:hidden verschwinden (bei der Variante mit Hintergrundbildern ergibt sich das von allein), und die einzelnen Eck-Grafiken klatscht man auf die Schnittpunkte.

So long,
 Martin

--
Zwei Kumpels sitzen vor dem Computer. "Welche Suchmaschine beutzt du eigentlich meistens?" - "Prima Vera." - "Hmm, kenn' ich gar nicht." Dann geht die Tür auf: "Schatz ich habe deine Sonnenbrille wiedergefunden!" - "Prima, Vera!"