CSS-Implementierungscode zum Zeichnen von Dreiecken (Rahmenmethode)

1. Implementieren Sie ein einfaches Dreieck

Mithilfe des Rahmens im CSS-Boxmodell können Sie ein Dreieck wie das folgende erzielen:

CSS zum Erstellen eines einfachen Dreiecks

Umsetzungsprinzip:

Sehen wir uns zunächst an, wie ein Rahmen aussieht, wenn einem Element ein Rahmen hinzugefügt wird. Dabei wird angenommen, dass der folgende Code vorhanden ist:

<div></div>

div {
    Breite: 50px;
    Höhe: 50px;
    Rand: 2px durchgehend orange;
}

Effektbild:

Häufige Verwendungen von Grenzen

Dies ist der häufigste Fall, wenn wir in unserem täglichen Leben Rahmen verwenden – wir weisen dem Rahmen oft nur eine geringe Breite zu (normalerweise 1–2 Pixel). Eine solche alltägliche Verwendung kann jedoch leicht zu Missverständnissen hinsichtlich der Bildung von Rahmen führen. Das heißt, die Leute denken, dass der Rahmen eines Elements aus vier rechteckigen Rahmen besteht.

Dies ist jedoch nicht der Fall. Tatsächlich besteht der Rand eines Elements aus Dreiecken . Um dieses Problem zu verdeutlichen, können wir die Breite des Rands vergrößern und für jede Randkante eine andere Farbe festlegen:

div {
    Breite: 50px;
    Höhe: 50px;
    Rand: 40px durchgezogen;
    Rahmenfarbe: orange blau rot grün;
}

Effektbild:

Wie die Grenze entsteht

Was passiert also, wenn wir einen Schritt weiter gehen und die Inhaltsgröße eines Elements auf 0 setzen?

div {
    Breite: 0;
    Höhe: 0;
    Rand: 40px durchgezogen;
    Rahmenfarbe: orange blau rot grün;
}

Effektbild:

Die Elementinhaltsgröße beträgt 0

Wir werden überrascht sein, dass das Element zu diesem Zeitpunkt durch vier Dreiecke „zusammengefügt“ ist: oben, unten, links und rechts. Was müssen wir also tun, um den endgültigen Effekt zu erzielen, d. h. das untere Dreieck beizubehalten? Es ist ganz einfach, wir müssen lediglich die Farbe der anderen Rahmenkanten auf Weiß oder Transparent einstellen:

div {
    Breite: 0;
    Höhe: 0;
    Rand: 40px durchgezogen;
    Rahmenfarbe: transparent transparent rot;
} 

Endergebnis

Duang~ Das letzte einfache Dreieck wird gezeichnet. Wenn Sie auch auf den anderen Seiten Dreiecke erhalten möchten, müssen Sie lediglich die Farbe der verbleibenden Randkanten auf Weiß oder Transparent setzen.

Der „versteckte“ obere Rand nimmt jedoch immer noch Platz ein. Um die Größe des gezeichneten Dreiecks zu minimieren, müssen Sie auch die Breite des oberen Rands auf 0 setzen (dasselbe gilt für andere Fälle):

div {
    Breite: 0;
    Höhe: 0;
    Rahmenbreite: 0 40px 40px;
    Rahmenstil: durchgezogen;
    Rahmenfarbe: transparent transparent rot;
}

2. Implementierung eines Dreiecks mit Rand

Ein umrandetes Dreieck ist ein Dreieck mit einem Rand in einer anderen Farbe, genau wie beim Hinzufügen eines Rands zu einem Element:

Dreieck mit Rand

Da wir die Rahmeneinstellung für das bestehende Dreieck nicht weiter ändern können, indem wir den Rahmen dafür setzen (weil das Dreieck selbst über den Rahmen implementiert wird), müssen wir einen anderen Weg finden. Der natürlichste Weg hierfür besteht darin, Dreiecke zu stapeln , d. h. das aktuelle Dreieck auf ein größeres Dreieck zu stapeln. Die in der obigen Abbildung gezeigte Implementierungsmethode besteht darin, das gelbe Dreieck auf das größere blaue Dreieck zu legen.

Um diesen Effekt zu erzielen, müssen Sie die absolute Positionierungsmethode verwenden:

Definieren Sie zuerst das äußere blaue Dreieck:

<div id="blau"><div>

#Blau {
    Position: relativ;
    Breite: 0;
    Höhe: 0;
    Rahmenbreite: 0 40px 40px;
    Rahmenstil: durchgezogen;
    Rahmenfarbe: transparent transparent blau;
}

Der Effekt ist:

Äußeres blaues Dreieck

Dann müssen Sie das gelbe Dreieck definieren. Da sich die Positionierung des gelben Dreiecks auf die Position des blauen Dreiecks beziehen muss, müssen Sie die absolute Positionierungsmethode verwenden. Dazu müssen Sie das gelbe Dreieck auch zu einem untergeordneten Element des blauen Dreiecks machen. Eine mögliche Lösung besteht darin, innerhalb des blauen Dreiecks ein zusätzliches Tag zu definieren, um das gelbe Dreieck darzustellen. Um Tags einzusparen, ist die Verwendung eines Pseudoelements jedoch eine bessere Lösung:

#blau:nach {
    Inhalt: "";
    Breite: 0;
    Höhe: 0;
    Position: absolut;
    oben: 0px;
    links: 0px;
    Rahmenbreite: 0 40px 40px;
    Rahmenstil: durchgezogen;
    Rahmenfarbe: transparent transparent gelb;
}

Das Ergebnis ist:

Definieren Sie das gelbe Dreieck

Achten Sie besonders auf den Versatz zwischen dem gelben und dem blauen Dreieck. Dieser Versatz wird durch top und left (in diesem Fall) sowie durch die Breite des Rands des gelben Dreiecks beeinflusst.

Sie haben vielleicht eine solche Frage: Warum ist das gelbe Dreieck um eine bestimmte Distanz nach links versetzt? Sollte es nicht vollständig mit dem blauen Dreieck überlappen, so wie hier?

Das gelbe Dreieck überlappt sich vollständig mit dem blauen Dreieck

Wenn Sie solche Zweifel haben, bedeutet das, dass Sie nicht genug über das Verständnis der absoluten Positionierung wissen. Der absolut positionierte Bereich basiert auf dem padding des absolut positionierten übergeordneten Elements . Auf dieser Grundlage werden dann eine Reihe von Attributen wie top , left , right , bottom usw. verwendet, um die Position der absolut positionierten untergeordneten Elemente einzuschränken. Da es sich bei dem blauen Dreieck in diesem Beispiel um ein absolut positioniertes übergeordnetes Element handelt und die Größe seines Inhalts 0 beträgt, ist der Inhaltsbereich der obere Scheitelpunkt des Dreiecks:

Absoluter Positionierungsbereich

Da für das gelbe Dreieck left: 0 und top: 0 festgelegt sind, wird der gesamte Inhalt des gelben Dreiecks (einschließlich Rahmen und Rand) entsprechend der oberen Ecke des blauen Dreiecks positioniert. Zu diesem Zeitpunkt können left: 0 und top: 0 als zwei „Trennwände“ betrachtet werden – die obere Trennwand und die linke Trennwand. Der gesamte Inhalt des gelben Dreiecks kann sich nur unterhalb der oberen Trennwand und rechts von der linken Trennwand befinden.

Da sich auch der Inhaltsbereich des gelben Dreiecks an dessen Spitze befindet und links und rechts jeweils ein 40px breiter Rand gesetzt ist, wird der Inhaltsbereich des gelben Dreiecks um 40px nach rechts versetzt und bildet so den vorherigen Effekt.

Überlegen Sie, welchen Positionierungseffekt Sie erzielen, wenn Sie die Position des gelben Dreiecks auf left: 0 und bottom: 0 setzen? (Wie in der Abbildung unten gezeigt)

Das gelbe Dreieck ist auf links: 0 und unten: 0 eingestellt

Nachdem Sie die absolute Positionierung verstanden haben, müssen Sie nur noch geringfügige Änderungen am Originalcode vornehmen, damit die Eckpunkte des gelben Dreiecks mit den Eckpunkten des blauen Dreiecks übereinstimmen. Gleichzeitig sollten Sie auch die Größe des gelben Dreiecks entsprechend reduzieren (im Verhältnis zu ähnlichen Dreiecken):

#blau:nach {
    Inhalt: "";
    Position: absolut;
    oben: 0px;
    links: -38px;
    Rahmenbreite: 0 38px 38px;
    Rahmenstil: durchgezogen;
    Rahmenfarbe: transparent transparent gelb;
}

erhalten:

Das gelbe Dreieck und das blaue Dreieck haben die gleichen Eckpunkte.

Im obigen Code werden die vorherigen Einstellungen von width: 0 und height: 0 absichtlich gelöscht, da das untergeordnete Element die Einstellung position:absolute hat, wodurch die Elementgröße auf die Größe des Elementinhalts verkleinert wird, ohne dass Breite und Höhe explizit festgelegt werden müssen. Da der Inhalt auf content: "" eingestellt ist, beträgt die Größe des untergeordneten Elements standardmäßig 0. Daher ist die Einstellung width: 0 und height: 0 überflüssig.

Im letzten Schritt verschieben Sie das gelbe Dreieck top nach unten an die entsprechende Stelle:

#blau:nach {
    Inhalt: "";
    Position: absolut;
    oben: 1px;
    links: -38px;
    Rahmenbreite: 0 38px 38px;
    Rahmenstil: durchgezogen;
    Rahmenfarbe: transparent transparent gelb;
}

So erzielen Sie den Endeffekt:

Endergebnis

Nachdem Sie nun gelernt haben, wie man ein Dreieck mit Rand zeichnet, ist es kein Problem, einen Dreieckspfeil wie den folgenden umzusetzen:

Dreieckpfeil

Implementierungscode:

#blau:nach {
    Inhalt: "";
    Position: absolut;
    oben: 2px;
    links: -38px;
    Rahmenbreite: 0 38px 38px;
    Rahmenstil: durchgezogen;
    Rahmenfarbe: transparent transparent #fff;
}

3. Zeichnen Sie Dreiecke mit anderen Winkeln

Zeichnen Sie Dreiecke mit anderen Winkeln, wie zum Beispiel:

Rechtwinkliges Dreieck

oder:

Links rechts Dreieck

Es ist sogar noch einfacher, denn sie basieren alle auf den zuvor gezeichneten Dreiecken. Wenn Sie ein rechtwinkliges Dreieck zeichnen möchten, setzen Sie den linken Rand auf 0; wenn Sie ein linkswinkliges Dreieck zeichnen möchten, setzen Sie den rechten Rand auf 0 (das Gleiche gilt für andere Situationen).

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.