div mit schräger kante

chr1zzo

hi zsm,

ich versuche einen div container mit schräger unterkante einzubinden. dieser soll eine hintergrundgrafik haben die beim scrollen der seite mitscrollt. habe das jetzt schon vermehrt gesehen und finde das ist ein schöner effekt. das ganze sieht dann so aus:

bin auf der suche diesbezüglich über folgenden code gestolpert:

css:

Code

.diagonal-shape.bl-to-tr {
  height: 0;
  border-style: solid;
  border-width: 300px 0 50px 100vw;
  border-color: transparent #fff #fff transparent;
}

html:

Code

<div class="diagonal-shape bl-to-tr"  style="background-image:url(images/BirkenimLicht.jpg); background-size: cover; background-repeat: no-repeat; background-attachment:fixed;"></div>

funktioniert soweit auch und wird wie im bild dargestellt angezeigt. allerdings nicht auf mobilen endgeräten
wo liegt der fehler?
bzw wie kann ich dies realisiern?
was muss ich ändern?
oder gibt es noch eine andere möglichkeit?

danke schonmal

sketch.media

Die border-width, die für die Schräge verantwortlich ist, wird in px festgelegt. Das ist ein fixer Wert der nicht in einem responsive Layout mitskaliert.

D.h. man muss diesen Wert entweder in % angeben, oder via media-Querys die px Werte in den verschiedenen Auflösungen anpassen.

Tags