# Schräge Kante erstellen



## redshot1 (14. Dezember 2013)

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 (14. Dezember 2013)

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 (14. Dezember 2013)

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 (14. Dezember 2013)

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)

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 (15. Dezember 2013)

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 (15. Dezember 2013)

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

Grüße


----------



## redshot1 (16. Dezember 2013)

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


----------



## Jan-Frederik Stieler (17. Dezember 2013)

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

Grüße


----------



## MichaelMilli0n (21. Mai 2014)

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.


----------



## SpiceLab (22. Mai 2014)

MichaelMilli0n hat gesagt.:


> 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.



Genau so wurde die Lösung in Post #4 und #5 umgesetzt, und schlußendlich hier erfolgreich vorgeschlagen 

Das erste Demo funktioniert auch ohne die im HTML-Header eingebundene Bootstrap- u. jQuery-Library.


----------



## Jan-Frederik Stieler (23. Mai 2014)

Hi,
die beiden Libaries sind da nur eingebunden weil ich die eben in meinem Template standardmäßig drin habe.
Jeder der sich halbwegs den Quellcode anschaut sieht das ich kein JS verwende.

Grüße


----------



## SpiceLab (23. Mai 2014)

Jan-Frederik Stieler hat gesagt.:


> die beiden Libaries sind da nur eingebunden weil ich die eben in meinem Template standardmäßig drin habe.
> Jeder der sich halbwegs den Quellcode anschaut sieht das ich kein JS verwende.


Alles gut 

Wollte bzgl. der JS-Bibliotheken nur darauf hingewiesen haben, damit kein falscher Eindruck entsteht, nachdem @MichaelMilli0n von einer korrekten Darstellung bei/trotz deaktiviertem JavaScript gesprochen hatte


----------



## MichaelMilli0n (23. Mai 2014)

Jan-Frederik Stieler hat gesagt.:


> Hi,
> die beiden Libaries sind da nur eingebunden weil ich die eben in meinem Template standardmäßig drin habe.
> Jeder der sich halbwegs den Quellcode anschaut sieht das ich kein JS verwende.
> 
> Grüße


Entspannt euch. ;-) Mein Post diente nicht der Kritik, sondern der Unterstützung. Ob im Quellcode JS drinnen ist oder nicht, weiß ich nicht, weil ich unabhängig von Beispielen geantwortet habe. Außerdem habe ich mir einen Quellcode nicht angeschaut. Ich habe mich bei meiner Antwort auf die Eingangsfrage bezogen.


----------



## SpiceLab (23. Mai 2014)

MichaelMilli0n hat gesagt.:


> Entspannt euch. Mein Post diente nicht der Kritik, sondern der Unterstützung. Ob im Quellcode JS drinnen ist oder nicht, weiß ich nicht, weil ich unabhängig von Beispielen geantwortet habe.


Wir sind überhaupt nicht verspannt 

Dass du dir die Beispiele wohl nicht näher angeschaut hattest, konnte deinem Lösungsvorschlag entnommen werden


----------

