Mit einer modifizierten Version von dieser -Technik habe ich es geschafft, schräg zu reagieren divs für eine Website, an der ich arbeite. Das Problem ist, dass es drei schräge divs übereinander gibt, und sie sollen eine diagonale Linie auf der Seite erzeugen (so muss jedes schräge Div korrekt mit den umgebenden Kanten ausgerichtet sein). Die Verwendung von prozentualen Breiten für diese Divs hat bisher nicht funktioniert, aber ich bin mir nicht sicher, was ich sonst noch versuchen sollte.
Eine gute Lösung dafür wäre reaktionsfähig und [vorzugsweise] nur css.
Sie können dies nicht nur mit CSS tun, wenn Sie prozentuale Breite JUST für die Inhalts-Divs und eine statische Breite für die Schrägflächen verwenden.
Stellen Sie sich folgendes vor: Nehmen wir an, die Breite Ihrer Seite ist 10 und jede der Schrägflächen hat eine Breite von 1. Sie haben die 3 divs bei 10%, 20% und 30%, was bedeutet, dass ihre Breiten 1 sind , 2, und 3 jeweils. Wenn Sie die Neigung hinzufügen, werden die Breiten 2, 3 und 4 angezeigt. Jetzt kommt das Problem, wenn wir die Behälterbreite 20 machen, also sind die divs jetzt 4, 6 und 8, oder 5, 7 und 9 nach dem Hinzufügen der Schrägen. Sie haben sich nicht mehr aneinander gereiht, weil sich die div-Breite geändert hat, aber die Schrägschnitte nicht.
Wenn Ihnen keine IE8-Unterstützung zur Verfügung steht, können Sie eine Kombination aus calc ( Ссылка ) und minimaler Breite verwenden etwas wie, was du willst. Die Schrägen sind 29px lang, wenn Sie also die div-Breiten auf calc (100% -700px), calc (100% -729px) und calc (100% -758px) oder einen Satz von drei Pixelbreiten ändern, solange sie 29px bleiben auseinander und dann legen Sie eine minimale Breite, die auch 29px auseinander sind, sollten Sie in der Lage sein, etwas zu erreichen, was Sie wollen.
BEARBEITEN: Codepen Beispiel Ссылка
Ändere einfach dieses CSS
%Vor%