Element mit schrägen Kanten

[Sariel]

Hallo,

jetzt sitze ich schon einige Zeit an etwas, das mir große Probleme bereitet.
Ich möchte via html + css eine Kopfzeile aus mehreren anklickbaren Feldern nebeneinander erstellen. Diese Felder sollen aber links und rechts nicht senkrecht aufhören sondern im 45° Winkel. Wenn ich jetzt aber die entsprenchenden png-Grafiken nebeneinander darstellen lasse, werden Sie behandelt, als wären sie an den Rändern senkrecht. Mit dem Knalleffekt, dass ein Abstand zwischen ihnen entsteht - was nicht ganz so ins Designkonzept passt ;)
Kann mir jemand weiterhelfen?

Vielen Dank!
Sariel

[Tabellenkalk]

Hallo,

werden Sie behandelt,

Im Internet ist eigentlich das Duzen üblich...

als wären sie an den Rändern senkrecht.

Hast Du es schon mit Transparenz versucht?

Gruß
Kalk

[Sariel]

Hast Du es schon mit Transparenz versucht?

na ich hab im png die ecken entsprechend transparent und den hintergrund auch aber das bringt mir nichts weil dann eben transparente ecken dargestellt werden... *verzweifel*

[Sariel]

werden Sie behandelt,

groß und kleinschreibung ist nich ganz so einfach wie man meinen könnte ;) sry mein fehler^^

[Matthias Scharwies]

Hallo,

jetzt sitze ich schon einige Zeit an etwas, das mir große Probleme bereitet.
Ich möchte via html + css eine Kopfzeile aus mehreren anklickbaren Feldern nebeneinander erstellen. Diese Felder sollen aber links und rechts nicht senkrecht aufhören sondern im 45° Winkel.

einfach die Elemente mit

  
{  
  transform:skewX(45deg);  
}  

verzerren, neigen.

http://www.css-lernen.net/css-neigen-skew-transformieren.php

http://caniuse.com/transforms2d

LG Matthias

[Gunnar Bittersmann]

@@Sariel:

nuqneH

Ich möchte via html + css eine Kopfzeile aus mehreren anklickbaren Feldern nebeneinander erstellen. Diese Felder sollen aber links und rechts nicht senkrecht aufhören sondern im 45° Winkel.

So etwa? (Archivsuche nach Parallelogramm)

Qapla'

[1UnitedPower]

Meine Herren!

So etwa? (Archivsuche nach Parallelogramm)

Mit der Prefix-Variante -webkit-transform funktioniert das auch in Chrome.