Responsive CSS Trapezform

9

Ich möchte eine reaktionsfähige Trapezform erstellen, die entweder CSS, SVG oder Canvas enthalten kann.

Ich konnte die Dreiecksform erzeugen, aber keine trapezförmige Form, die reagiert.

%Vor% %Vor%

Ich habe gesehen, dass es viele Fragen zu SO gibt, die eine Trapezform umfassen, aber sehr wenig Gründe haben, warum sie besser sind als andere Methoden und auch eine große Mehrheit nicht anspricht.

Zum Beispiel erfordern diese Fragen keine Reaktionsfähigkeit und daher reagieren die Antworten nicht:

Stewartside 03.11.2015, 16:39
quelle

2 Antworten

26

Es gibt viele verschiedene Möglichkeiten, die trapezförmige Form zu erzeugen und jede hat ihre eigenen Vorteile und Nachteile.

Im Folgenden finden Sie eine umfassende Liste der verschiedenen Möglichkeiten und alle sollten reagieren.

CSS-Rahmen

Von allen Antworten am besten unterstützt. Es ist Unterstützung zurück zu IE und über alle anderen Browser sowohl auf dem Desktop als auch mobil.

%Vor% %Vor%

CSS-Perspektive

Ein ziemlich neuer Ansatz innerhalb von CSS ist die perspektivische Methode in CSS Transforms. Es wird jetzt in allen modernen Browsern ziemlich gut unterstützt, aber es kann ziemlich schwierig sein, die exakte Formgröße zu erhalten, die Sie wollen.

%Vor% %Vor%

CSS-Clip-Pfad

Clip-Pfade erstellen einen SVG-Clip und verwenden diesen, um die gewünschte Form zu erstellen. Es ist der simpelste Weg (zumindest meiner Meinung nach), alle Formen mit reinem CSS zu erstellen, wird aber selbst in modernen Browsern nicht sehr gut unterstützt.

%Vor% %Vor%

CSS Skew mit Pseudo-Elementen

Diese Antwort wurde mir von web-tiki

gegeben

Es ist vergleichbar mit der perspektivischen Antwort, indem es Transformationen verwendet, aber auch Pseudoelemente verwendet, die stattdessen den Skew aufweisen.

%Vor% %Vor%

SVG

SVG steht für Scalable Vector Graphic. Der Webbrowser betrachtet es als Bild, aber Sie können Text und normale HTML-Elemente innerhalb eines SVGs hinzufügen.

Es wird von allen Browsern unterstützt, die hier zu sehen sind: CanIUse

%Vor%

Leinwand

Canvas ähnelt SVG, verwendet jedoch ein Raster (pixelbasiert) anstelle eines Vektors, um die Form zu erstellen.

Die Browserunterstützung für Canvas ist ziemlich gut.

%Vor% %Vor%
    
Stewartside 03.11.2015, 16:39
quelle
1

Ich werde die fehlende Methode der obigen Antwort hinzufügen:

Mehrfacher Hintergrund & amp; linear-gradient

%Vor% %Vor%
    
Temani Afif 03.04.2018 19:35
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Warum bricht span außerhalb von div ab, wenn Rand und Padding angewendet werden?