Schräge Kante erstellen

redshot1

Grünschnabel

• 14. Dezember 2013

• #1

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

Monsterator

Moderator

• 14. Dezember 2013

• #2

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

Grünschnabel

• 14. Dezember 2013

• #3

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

Monsterator

Moderator

• 14. Dezember 2013

• #4

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

ɐɯıǝɹ

• 15. Dezember 2013

• #5

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

Grünschnabel

• 15. Dezember 2013

• #6

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

Monsterator

Moderator

• 15. Dezember 2013

• #7

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

Grüße

 

redshot1

Grünschnabel

• 16. Dezember 2013

• #8

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

 

Jan-Frederik Stieler

Monsterator

Moderator

• 17. Dezember 2013

• #9

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

Grüße

 

MichaelMilli0n

Grünschnabel

• 21. Mai 2014

• #10

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.

 

Zuletzt bearbeitet von einem Moderator: 21. Mai 2014