Schrägen mit CSS (nur Hintergrundfarbe)?

[Liv3pl4y]

Hallo zusammen,

im Moment arbeite ich an einem neuen Menülayout für mein Design. Dort wird ein Teil des Menüs das allgemeine Seitenmenü sein und die andere Seite wird den User-Login beinhalten. Auf letzterer Seite soll es eine andere Hintergrundfarbe geben. Dieser Farbunterschied soll am ersten Listenelement und/oder dem DIV eine Schräge bekommen.

Wie auf diesem Bild zu sehen:

Nun meine Frage ist der schräge Hintergrund so mit CSS möglich, oder muss ich hier doch zu einer Grafik greifen? Ich hatte es mit der Transform Eigenschaft "skew" versucht, allerdings werden dadurch auch alle untergeordneten Elemente beeinflusst, wie zum Beispiel Texte.

 

[dn3d_fanboy]

Du könntest versuchen am Ende ein Dreieck als DIV mittels z-index drunter zu schieben.
Wie du ein Dreieck erstellst, kannst du bspw. hier nachlesen: http://t3n.de/news/css-geometrische-figuren-reinem-358616/

Es gibt aber auch eine Methode, um die Unterelemente wieder gerade zu rücken. Da finde ich nur leider gerade nicht den Link.

 

[patrick_l]

Mit CSS3 und der Eigenschaft "transform" möglich, jedoch würde ich eine Grafik verwenden. Diese mit anderen als Sprite zusammenfassen und per CSS (background) einbinden.

LG Patrick

 

[cebito]

Geht so http://jsfiddle.net/ec8Lovc1/