Detaillierte Erklärung der Dreieckszeichnung und clevere Anwendungsbeispiele in CSS

führen

Einige gängige Dreiecke auf Webseiten können direkt mit CSS gezeichnet werden, ohne dass sie in Bilder oder Schriftsymbole umgewandelt werden müssen. Auf der offiziellen Website von Xiaomi heißt es:

Und von der JD-Website:

Wie werden diese Dreiecke also durch CSS implementiert?

Dreiecksimplementierung

Dies können wir erreichen, indem wir die Breite und Höhe eines Div-Containers auf 0 setzen und dann den Rand des Containers festlegen.

.Kasten {
            Höhe: 0;
            Breite: 0;
            Rahmenfarbe: Weizen, Himmelblau, Rosa, RGB (154, 121, 230);
            Rahmenstil: durchgezogen;
            Rahmenbreite: 40px;
        }

Der obige Code kann die folgenden Effekte erzielen:

Im obigen Code müssen die Breite und Höhe der Box 0 sein, die Farbwerte der Ränder sind jeweils oben, rechts, unten und links, die Ränder sind durchgezogene Linien und die Breite der vier Ränder beträgt 40 Pixel, was zu 4 gleichschenkligen rechtwinkligen Dreiecken führt. Die Größe des Dreiecks hängt von der Breite des Rahmens ab. Je größer der Wert für die Rahmenbreite, desto größer das Dreieck.

Wenn nur eines der Dreiecke benötigt wird , kann dies dadurch erreicht werden, dass die anderen Rahmenfarben transparent eingestellt werden. Um folgende Effekte zu erzielen:

Um dies zu erreichen, können Sie die Farbwerte von „Rand oben“, „Rand unten“ und „Rand links“ auf transparent setzen.

.Kasten {
            Höhe: 0;
            Breite: 0;
            Rahmenfarbe: transparent himmelblau transparent transparent;
            Rahmenstil: durchgezogen;
            Rahmenbreite: 40px;
        }

Was ist, wenn kein gleichschenkliges Dreieck benötigt wird? Wie kann man es erreichen?
Wie oben erwähnt, hängt die Größe des Dreiecks vom Wert von border-width ab. Die Werte in den vier Richtungen werden auf den gleichen Wert gesetzt, sodass ein gleichschenkliges Dreieck entsteht. Durch Ändern des Rahmenbreitenwerts können Sie rechtwinklige Dreiecke unterschiedlicher Größe erhalten.

.Kasten {
            Höhe: 0;
            Breite: 0;
            Rahmenfarbe: transparent himmelblau transparent transparent;
            Rahmenstil: durchgezogen;
            Rahmenbreite: 80px 40px 0 0;
        }

Dann erhalten wir folgendes Dreieck:

Anwendung des kleinen Dreiecks

Dies kann nicht nur durch das Zeichnen von Dreiecken, sondern auch durch die Positionspositionierung erreicht werden. Wie beispielsweise der eingangs erwähnte Effekt der Preisanzeige auf der Website JD.com.

Das Trapez in dieser Darstellung kann erreicht werden, indem ein rechtwinkliges Dreieck wie unten gezeigt auf der rechten Seite des Rechtecks ​​positioniert und die Hintergrundfarbe des Dreiecks auf Weiß eingestellt wird.

Natürlich kann das kleine Dreieck Pseudoelemente verwenden, um die Webseitenstruktur zu vereinfachen, aber Pseudoelemente sind Inline-Elemente und müssen zuerst in Inline-Blockelemente oder Elemente auf Blockebene konvertiert werden.

Zusammenfassen

Beim Zeichnen eines Dreiecks mit CSS müssen Sie folgende Punkte beachten:

• Die Breite und Höhe des Containers müssen 0 sein
• Die Größe des Dreiecks hängt vom Rahmenbreitenwert ab.

Dies ist das Ende dieses Artikels über das Zeichnen und geschickte Anwenden von Dreiecken in CSS. Weitere relevante Inhalte zum Zeichnen von Dreiecken in CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!