Ich habe versucht, heute Dreiecke in CSS für eine Responsive Site zu erstellen und konnte kein gutes Beispiel für den Stackoverflow finden. Hier ist also, wie ich es gemacht habe.
Das Anpassen von eckigen Formen ist ein wenig schwierig, da Sie prozentuale border -Werte in Ihrem CSS nicht verwenden können. Daher habe ich einige Funktionen geschrieben, um die Seitenbreite zu berechnen und die Größe eines Dreiecks entsprechend zu ändern. Die erste berechnet die Größe beim Laden der Seite, die zweite berechnet die Größe neu, wenn sich die Seitenbreite ändert.
CSS:
%Vor%HTML:
%Vor%JS:
%Vor%Hier ist ein jsFiddle - Ссылка
Reponsive Dreiecke können nur mit CSS erreicht werden, indem man den Vorteil nutzt, dass das Padding gegen die Breite der Eltern berechnet wird, um ein großes Dreieck mit fester Breite abzudecken. So erstellen Sie ein nach oben zeigendes Dreieck mit einer Breite von 100%:
%Vor%Oder mit Pseudoelementen und nur einem div:
%Vor%Hier ist eine Geige . Für die vollständige Erklärung, wie diese arbeiten und die nach unten, links und rechts zeigenden Dreiecksausschnitte sehen Sie meinen Artikel auf Pure CSS reaktionsfähigen Dreiecken . Der angegebene CSS-Wert bezieht sich auf ein Dreieck mit einem Basis-Höhen-Verhältnis von 2. Der Versuch, die Proportionen des Dreiecks zu ändern, ohne zu wissen, wie diese Dreiecke die Reaktionsfähigkeit fälschen, kann kompliziert sein.
Sie könnten dasselbe mit einfachem CSS erreichen
Um es reaktionsfähig zu machen, benutze es in Medienabfragen ..
Probieren Sie die folgende JsFiddle
aus %Vor%Tags und Links jquery css responsive-design shape css-shapes