Das Prinzip der Dreiecksrealisierung in CSS

Das Prinzip der Implementierung eines Dreiecks mit CSS: Bestimmen Sie zunächst die Richtung der Basis und legen Sie fest, welche Richtung den Farbwert hat. Entfernen Sie dann direkt die Breite der linken und rechten Seite die Länge der Basis des Dreiecks und seine eigene Breite ist die Höhe des Dreiecks.

Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, DELL G3-Computer

Reines CSS zur Implementierung des Dreiecksprinzips

Machen wir uns vor der Implementierung mit dem CSS-Box-Modell vertraut

Dann erstellen Sie einen gewöhnlichen. Wenden Sie den

<p></p>
.triangle {
    width: 100px;
    height: 100px;
    border-top: 10px solid #000;
    border-right: 10px solid #ff0000;
    border-left: 10px solid #00ff00;
    border-bottom: 10px solid #0000ff;
}

-Effekt an:

Zu diesem Zeitpunkt müssen Sie auf den Schnittpunkt der vier Ränder achten, der später verwendet wird. Entfernen Sie dann die Breite und Höhe des Inhalts, um die Beobachtung zu erleichtern. Der Effekt ist wie folgt:

.triangle {
    width: 0;
    height: 0;
    border-top: 100px solid #000;
    border-right: 100px solid #ff0000;
    border-left: 100px solid #00ff00;
    border-bottom: 100px solid #0000ff;
}

Jetzt haben Sie nicht das Gefühl, dass das Dreieck etwas rudimentär ist in alle vier Richtungen? Wenn Sie die Farbe in andere Richtungen transparent einstellen möchten, versuchen Sie es zunächst mit einem nach unten gerichteten Dreieck:

.triangle {
    width: 0;
    height: 0;
    border-top: 100px solid #000;
    border-right: 100px solid transparent;
    border-left: 100px solid transparent;
    border-bottom: 100px solid transparent;
}

Natürlich wird der untere Rand derzeit nicht verwendet Dadurch erhöht sich auch die Gesamthöhe. Es kann direkt entfernt werden. Können wir es so verstehen, dass die Farbe dort bleibt, wo der Boden ist?
Die nächste Frage ist die Breite und Höhe dieses Dreiecks. Wenn Sie genau hinsehen, entspricht die Breite dieses Dreiecks genau der Summe des linken und rechten Rands, also 200 Pixel, und seine Höhe entspricht natürlich der Breite des oberen Rands , also 100 Pixel. [Empfohlenes Lernen: „CSS-Video-Tutorial“]
Wenn der Entwurfsentwurf analog dazu ein nach oben gerichtetes Dreieck mit einer Länge von 50 Pixel und einer Höhe von 60 Pixel ist, sollte er so geschrieben werden:

.triangle {
    width: 0;
    height: 0;
    border-top: 60px solid #000;
    border-right: 25px solid transparent;
    border-left: 25px solid transparent;
}

Du kann auch ein rechtwinkliges Dreieck implementieren:

Es gibt andere rechtwinklige Dreiecke mit verschiedenen Winkeln, die beispielsweise angepasst werden können, um ein rechtwinkliges rechtwinkliges Dreieck mit einer Länge von 50 und einer Höhe von 60 zu erstellen :

.triangle {
    width: 0;
    height: 0;
    border-top: 100px solid #000; 
    border-left: 100px solid transparent;
}

Die Basis ist oben, also legt border-top die Farbe fest. Seine Breite ist die Höhe, also ist die Breite auf 60 eingestellt. Die Länge der unteren Kante muss durch den rechten Rand gestreckt werden (weil Die linke Seite ist ein rechter Winkel, was bedeutet, dass keine anderen Ränder damit überlappen. Daher wird der rechte Rand festgelegt und die Breite entspricht der Länge des Dreiecks, die 50 beträgt.

Zusammenfassung:

Gewöhnliches Dreieck: Unabhängig von der Richtung der Basis wird der Farbwert in diese Richtung eingestellt. Die gegenüberliegende Seite wird direkt entfernt und dann die Summe der Breiten ihrer linken und rechten (oberen und unteren) Seiten ist die Länge der Basis des Dreiecks. Seine eigene Breite ist die Höhe des Dreiecks.

Rechtes Dreieck: Sie benötigen nur zwei Ränder. Sie können es zuerst in eine quadratische Reihe füllen und dann die Seite, auf der sich das zusätzliche Dreieck befindet, mit einem Farbwert belassen.

Wenn Sie Fragen haben, korrigieren Sie mich bitte ~

Das obige ist der detaillierte Inhalt vonDas Prinzip der Dreiecksrealisierung in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!