Schräge Kante erstellen

[redshot1]

Servus zusammen,

habe da ein kleines Problem beim bauen einer Seite. Habe zwei <div> untereinander, bei dem die Kanten abgeschrägt sein sollen. Via CSS Border geht dies leider nicht, da der Hintergrund einen Radial Verlauf hat. Auch nicht via Transform, da noch Text enthalten ist. Anbei ein Bild, um das ganze etwas besser zu verdeutlichen



Ob CSS2 oder CSS3, ist hierbei egal. Wichtig ist nur das es im Chrome, Firefox und ab IE10 oder 11 läuft.

Hat jemand gute Ideen?

Danke für Hilfe und Grüße
Red

 

[Jan-Frederik Stieler]

Hi,
vielleicht kannst du das ja in dein CSS einbauen:
http://mm-creative.de/2013/01/20/teil-1-figuren-gestalten-mit-css-die-grundformen/

Grüße

 

[redshot1]

Hi,

leider nein, da wie bereits gesagt, in dem DIV auch Texte enthalten sind, welche dann mit transformiert werden würden. Ebenso geht keine Border, weil ein Verlauf enthalten ist

 

[Jan-Frederik Stieler]

Hi,
ich hab dir hier mal ein Beispiel erstellt: http://jsbin.com/EKawanoF/2/edit
Ist natürlich etwas arg tricky da man jedes Element wieder gegendrehen muss damit es grade wird. Aber es geht.
Und es ist auch die Frage inwieweit man das wirklich einsetzen sollte da es da 100% irgendwelche Abweichungen in unterschiedlichen Browsern gibt.

Grüße

 

[Matthias Reitinger]

Hallo,

ich hab mich zeitgleich auch daran versucht: http://jsfiddle.net/Jr4gJ/ Ist nur in Chrome getestet, aber sollte relativ einfach auch für andere Browser anpassbar sein.

Grüße
Matthias

 

[redshot1]

Hi, ja geil das klappt super ab IE9 alles gut. Nur im Chrome ist etwas ungeglättet, aber da macht auch die backface-visibility nichts mit besser. Hoffe einfach dass, das mit nem Update mal besser wird Danke nochmal!

 

[Jan-Frederik Stieler]

Hi,
also bei mir wird das unter Chrome Version 31 mit backface-visibility: hidden antialiesed.

Grüße

 

[redshot1]

Ja, aber das sieht ja fürchterlich beim Text aus. Dann lass ich doch lieber im Chrome die ungeglätteten Kanten

 

[Jan-Frederik Stieler]

Hi,
da haste recht. Muss man halt abwägen.
Leider kann man das für Kindelemente nicht ausschalten.

Grüße

 

[MichaelMilli0n]

Bin ich zu spät dran? Ich bin neu hier und bin über einen Backlink auf das Thema gestoßen.
Ich hätte eine adäquate Lösung parat.

Ein Container im Container ist die einfachste und sicherste Lösung. So kann die Schräge auch dargestellt werden, wenn JavaScript abgeschalten ist.
Den ersten/äußeren Container transformierst Du in die eine Richtung und den inneren Container transformierst Du um die gleiche Gradzahl in die entgegengestetzte Richtung.
Das funktioniert ganz ohne JS oder jQuery, ist mit einfachen CSS-Anweisungen zu erledigen.

Das ein Rendering abseits der normalen waagerechten und Senkrechten Kanten der gewohnten Container in jedem Browser anders aussieht, da hilft meines Erachtens auch kein JavaScript.