Eine gängige Technik zur Implementierung von Dreiecken mit CSS (mehrere Methoden)

In manchen Vorstellungsgesprächen werden häufig Fragen zu CSS gestellt. So wird gefragt, wie man mit CSS ein Dreieck zeichnet. Die übliche Antwort lautet normalerweise, dass man zum Zeichnen nur einen Rahmen verwenden soll.

Da sich CSS bis heute weiterentwickelt hat, gibt es tatsächlich viele interessante Möglichkeiten, Dreiecke nur mit CSS zu zeichnen. Dieser Artikel listet sie im Detail auf.

In diesem Artikel lernen Sie 6 Möglichkeiten zum Zeichnen von Dreiecken mit CSS kennen, die alle sehr leicht zu erlernen sind.

Natürlich ist dieser Artikel nur ein Ausgangspunkt. CSS ändert sich mit jedem Tag. Es kann sein, dass einige interessante Methoden in diesem Artikel fehlen. Sie können sie gerne im Kommentarbereich hinzufügen~

Zeichnen Sie ein Dreieck mit Rahmen

Die meisten Menschen sollten in der Lage sein, Dreiecke mithilfe von Rändern zu implementieren. Dies kommt häufig in verschiedenen Face-to-Face-Erfahrungen vor. Die Implementierung erfolgt mithilfe eines Containers mit Höhe und Breite null und einem transparenten Rand.

Der einfache Code lautet wie folgt:

div {
  Rahmen oben: 50px durchgehend gelbgrün;
  Rahmen unten: 50px durchgehendes Dunkelrosa;
  Rahmen links: 50px, durchgehendes Biskuit;
  Rand rechts: 50px, durchgehend Schokolade;
}

Legen Sie für einen Container mit Höhe und Breite Null Ränder in unterschiedlichen Farben fest:

Auf diese Weise können Sie sehr einfach Dreiecke mit unterschiedlichen Winkeln erhalten, wenn die Rahmenfarbe aller drei Seiten transparent ist:

CodePen-Demo - Dreieck mit Rahmen

Zeichnen Sie ein Dreieck mit linearem Farbverlauf

Als nächstes verwenden wir linear-gradient um das Dreieck zu erstellen.

Auch das Prinzip ist ganz einfach. Wir realisieren eine 45° Steigung:

div {
  Breite: 100px;
  Höhe: 100px;
  Hintergrund: linearer Farbverlauf (45 Grad, Dunkelrosa, Gelbgrün);
} 

Ändern Sie die Farbe von einem Farbverlauf in zwei feste Farben:

div {
  Breite: 100px;
  Höhe: 100px;
  Hintergrund: linearer Farbverlauf (45 Grad, Dunkelrosa, Dunkelrosa 50 %, Gelbgrün 50 %, Gelbgrün 100 %);
} 

Machen Sie dann eine der Farben transparent:

div {
  Hintergrund: linearer Farbverlauf (45 Grad, Dunkelrosa, Dunkelrosa 50 %, transparent 50 %, transparent 100 %);
} 

Durch rotate oder scale können wir auch Dreiecke mit verschiedenen Winkeln und Größen erhalten. Die vollständige Demo finden Sie hier:

CodePen-Demo – Dreieck mit linearem Farbverlauf

Zeichnen Sie ein Dreieck mit Kegelschnitt-Gradient

Wir verwenden immer noch einen Farbverlauf. Wir haben einen linearen Farbverlauf verwendet, um das Dreieck oben zu realisieren. Interessanterweise kann in der Farbverlaufsfamilie auch conic-gradient verwendet werden, um ein Dreieck zu realisieren.

Die Methode besteht darin, dass der Mittelpunkt des Winkelgradienten ähnlich wie der Mittelpunkt des radialen Gradienten festgelegt werden kann.

Wir setzen den Mittelpunkt des Winkelgradienten auf 50% 0 , also center top , also in der Mitte der Oberseite des Containers, und führen dann einen Winkelgradienten aus. Innerhalb eines bestimmten Winkelbereichs nimmt der Gradient eine dreieckige Form an.

Angenommen, wir haben einen Container mit einer Höhe und Breite von 200px x 100px und legen den Mittelpunkt seines Winkelgradienten auf 50% 0 fest:

Stellen Sie es außerdem so ein, dass die Winkelgradientenkarte beginnend bei 90° gezeichnet wird, wie unten gezeigt:

Es ist ersichtlich, dass die Winkelgradientenform zu Beginn ein Dreieck ist, bevor sie die zweite Kante erreicht. Wir können leicht ein Dreieck erhalten, indem wir einen geeigneten Winkel auswählen:

div {
    Hintergrund: Kegelförmiger Farbverlauf (von 90 Grad bei 50 % 0, Dunkelrosa 0, Dunkelrosa 45 Grad, transparent 45,1 Grad);
} 

Die zusätzlichen 0.1deg in deeppink 45deg, transparent 45.1deg im obigen Code dienen lediglich dazu, den durch den Farbverlauf verursachten Aliasing-Effekt zu beseitigen. Auf diese Weise können wir durch conic-gradient leicht ein Dreieck erhalten.

Ebenso können wir mithilfe von rotate oder scale Dreiecke mit verschiedenen Winkeln und Größen erhalten. Die vollständige Demo finden Sie hier:

CodePen-Demo – Dreieck mit Winkelgradient

Transformieren: Drehen mit Überlauf: Ausgeblendet, um ein Dreieck zu zeichnen

Diese Methode ist relativ konventionell und verwendet transform: rotate mit overflow: hidden . Sie können es auf einen Blick verstehen und in einem Rutsch lernen. Das einfache Animationsdiagramm sieht wie folgt aus:

Setzen Sie den Rotationspunkt der Grafik auf die left bottom und drehen Sie sie mit overflow: hidden .

Vollständiger Code:

.Dreieck {
    Breite: 141px;
    Höhe: 100px;
    Position: relativ;
    Überlauf: versteckt;
    
    &::vor {
        Inhalt: "";
        Position: absolut;
        oben: 0;
        links: 0;
        rechts: 0;
        unten: 0;
        Hintergrund: Dunkelrosa;
        Transform-Origin: links unten;
        transformieren: drehen (45 Grad);
    }
}

CodePen-Demo – Transformieren: Drehen mit Überlauf: Ausgeblendet, um ein Dreieck zu erstellen

Verwenden des Clip-Pfads zum Zeichnen eines Dreiecks

clip-path ist eine sehr interessante CSS-Eigenschaft.

clip-path erstellt einen Clipping-Bereich, in dem nur ein Teil eines Elements sichtbar ist. Der Teil innerhalb des Bereichs wird angezeigt, und der Teil außerhalb des Bereichs wird ausgeblendet. Der Clipping-Bereich wird durch einen Pfad definiert, auf den entweder eine eingebettete URL oder ein externer SVG-Pfad verweist.

Mit anderen Worten: Mit clip-path können wir einen Container in jede gewünschte Form zuschneiden.

Durch 3 Koordinatenpunkte wird ein Polygon realisiert, wobei der zusätzliche Raum abgeschnitten wird. Der Code ist auch sehr einfach:

div {
    Hintergrund: Dunkelrosa;
    Clip-Pfad: Polygon (0 0, 100 % 0, 0 100 %, 0 0);
} 

CodePen-Demo – Dreieck mit Clip-Pfad

Auf dieser Website – CSS-Clip-Path-Maker – können Sie schnell einfache clip-path -Grafiken erstellen und den entsprechenden CSS-Code erhalten.

Zeichnen Sie ein Dreieck mit Zeichen

OK, die letzte, etwas einzigartige Möglichkeit besteht darin, ein Zeichen zur Darstellung eines Dreiecks zu verwenden.

Nachfolgend sind die dezimalen Unicode-Darstellungen einiger dreiecksförmiger Zeichen aufgeführt.

◄ : ◄ 
► : ► 
▼: ▼ 
▲: ▲
⊿: ⊿
△: △

Beispielsweise verwenden wir ▼ um ein Dreieck▼ zu implementieren. Der Code lautet wie folgt:

<div class="normal">&#9660; </div>

div {
    Schriftgröße: 100px;
    Farbe: dunkelrosa;
}

Die Wirkung ist immer noch gut:

Es ist jedoch zu beachten, dass die Verwendung von Dreiecken zur Zeichendarstellung stark mit der aktuell eingestellten Schriftart zusammenhängt. Verschiedene Schriftarten zeichnen dasselbe Zeichen unterschiedlich. Ich habe bei Google Font zufällig mehrere verschiedene Schriftarten ausgewählt, um dasselbe Zeichen darzustellen, und die Ergebnisse sind wie folgt:

Wie Sie sehen, haben verschiedene Schriftarten unterschiedliche Formen, Größen und Grundlinien. Wenn Sie also ein Glyphendreieck verwenden möchten, stellen Sie sicher, dass im Browser des Benutzers die von Ihnen angegebene Schriftart installiert ist. Verwenden Sie andernfalls diese Methode nicht.

Die komplette Vergleichsdemo finden Sie hier:

CodePen-Demo - Implementieren eines Dreiecks mit Zeichen

endlich

Damit ist dieser Artikel zu Ende. Ich hoffe, dieser Artikel hilft Ihnen bei der Beschreibung der 6 verschiedenen Möglichkeiten zum Zeichnen von Dreiecken mit CSS.

Wenn Sie die interessantesten CSS-Informationen erhalten möchten, verpassen Sie nicht meinen offiziellen Account - iCSS-Frontend-Neuigkeiten 😄

Weitere wunderbare technische CSS-Artikel sind in meinem Github – iCSS – gesammelt. Sie werden ständig aktualisiert. Klicken Sie einfach auf einen Stern, um sich anzumelden und zu sammeln.

Damit ist dieser Artikel über die altmodischen Techniken zur Implementierung von Dreiecken mit CSS (auf verschiedene Arten) abgeschlossen. Weitere Inhalte zu Techniken zur Implementierung von Dreiecken mit 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!