Dreiecke sie gehören zu den einfachsten und vielseitigsten geometrischen Formen. Sie können im Design von Webseiten verwendet werden, um Schaltflächen, Pfeile, Hintergrunddekorationen und vieles mehr zu erstellen.
Mache ein Dreieck mit CSS und HTML es mag für einen Anfänger eine entmutigende Aufgabe sein, aber es ist eigentlich ziemlich einfach. Es gibt mehrere Möglichkeiten, Dreiecke mit CSS zu erstellen, aber eine der gebräuchlichsten Methoden ist die Verwendung des Pseudoelements ::after oder ::before . Mit diesen Pseudoelementen können Sie dem Element zusätzliche Stile hinzufügen, einschließlich der Erstellung eines Dreiecks.
Es ist wichtig zu beachten, dass die Verwendung von Bildern oder SVG nicht erforderlich ist, um ein Dreieck mit CSS und HTML zu erstellen, alles wird mit Code erledigt.
Wie erstelle ich ein Dreieck
Verwenden Sie die Border-Eigenschaft, um ein Dreieck zu erstellen. Legen Sie die Breite und Höhe des Elements fest und legen Sie einen der Werte der border-width-Eigenschaft auf Null fest. Kehren wir später zu dieser Eigenschaft zurück.
Als nächstes setzen wir nur einen Elementrahmen mit der border-width-Eigenschaft. Wir werden die Grenze verwenden, die für die obere Seite des Dreiecks verantwortlich ist. Legen Sie diese Grenze auf die gewünschte Breite und die gewünschte Farbe fest.
Jetzt haben wir ein Element mit einer oberen Grenze, die optisch wie ein Dreieck aussieht. Das Dreieck wird jedoch in der Hintergrundfarbe des Elements eingefärbt. Um es transparent zu machen, legen Sie die background-color-Eigenschaft auf transparent fest.
Und der letzte Schritt ist, dass wir den Winkel des Dreiecks abrunden, den wir scharf machen müssen. Dies geschieht mit der border-radius-Eigenschaft.
Und siehe da, dein Dreieck ist fertig! Jetzt können Sie seine Größe, Farbe und Form steuern, indem Sie den Eigenschaften border , border-width , background-color und border-radius unterschiedliche Werte zuweisen.
Verwenden Sie CSS und HTML, um eine geometrische Form zu erstellen
Mit CSS und HTML können Sie ganz einfach verschiedene geometrische Formen wie ein Dreieck, ein Quadrat, einen Kreis und vieles mehr erstellen. In diesem Abschnitt erfahren Sie, wie Sie ein Dreieck mit CSS und HTML erstellen.
Zuerst erstellen wir einen Container, in dem sich unser Dreieck befindet. Dies kann mit dem Tag oder erfolgen. Fügen Sie den folgenden Code hinzu:
Als nächstes fügen wir Stile für unser Dreieck innerhalb des Tags hinzu . Verwenden Sie dazu das Pseudo-Element ::before oder ::after:
.triangle
Im obigen Code haben wir die Breite und Höhe des Elements auf Null gesetzt, um ein Dreieck zu erstellen. Die Grenzen der linken und rechten Seite des Dreiecks werden als die Hälfte seiner Breite angegeben, um ein gleichschenkliges Dreieck zu erhalten. Die untere Grenze ist auf die volle Breite des Dreiecks festgelegt, und wir haben die Farbe des Rahmens auf #000 festgelegt, was schwarz ist.
Nachdem wir nun einen Container erstellt und Stile für das Dreieck hinzugefügt haben, können Sie die resultierende Form sehen. Fügen Sie diesen Code einfach in Ihr HTML-Dokument ein und sehen Sie sich das Ergebnis an.
Auf diese Weise können Sie mit CSS und HTML problemlos verschiedene geometrische Formen erstellen, und ein Dreieck ist nur ein Beispiel.
Verbinden Sie CSS-Stile mit einem HTML-Element
Um ein Dreieck mit CSS und HTML zu erstellen, müssen wir zuerst die CSS-Stile mit dem HTML-Element verbinden. Dazu können wir ein Tag verwenden
