Wie zeichne ich ein Quadrat in CSS: Einfache Möglichkeiten und Beispiele

Ein Quadrat ist eine der einfachsten und bekanntesten geometrischen Formen und kann in CSS mit nur wenigen Codezeilen gezeichnet werden! Wenn Sie lernen möchten, wie man Quadrate in CSS erstellt und stilisiert, müssen Sie sich mit einigen Grundlagen vertraut machen.

Eine Möglichkeit, ein Quadrat in CSS zu zeichnen, besteht darin, eine Eigenschaft zu verwenden width um die Länge der Seite des Quadrats sowie die Eigenschaft anzugeben background-color um die Farbe des Quadrats festzulegen. Der folgende Code erstellt beispielsweise ein Quadrat mit einer Seite von 100 Pixeln und einem roten Hintergrund:

.square

Wenn Sie ein Quadrat mit einem leeren Mittelpunkt erstellen müssen, können Sie negative Einrückungswerte für die Mittelseiten des Quadrats verwenden:

.square

Darüber hinaus können Sie mit CSS Quadrate drehen, Rahmen, Schatten hinzufügen und verschiedene Effekte anwenden. Indem Sie eine Vielzahl von CSS-Eigenschaften verwenden und sie miteinander kombinieren, können Sie Quadrate mit einer Vielzahl von äußeren Eigenschaften erstellen!

Erstellen eines Quadratelements in HTML und CSS

Jetzt haben wir ein Element, das das Quadrat darstellt. Als nächstes fügen wir unserem Element Stile hinzu, damit es wie ein Quadrat aussieht. Verwenden Sie dazu CSS:

#квадрат

Im obigen Beispiel wurde die Breite und Höhe des Quadrats auf jeweils 100 Pixel festgelegt. Die Hintergrundfarbe ist auf Rot eingestellt. Sie können diese Werte je nach Bedarf oder Vorliebe ändern.

Nachdem die Stile angewendet wurden, sieht das Element mit der Kennung "Quadrat" wie ein rotes Quadrat mit einer Seite von 100 Pixeln aus.

Jetzt wissen Sie, wie Sie ein Quadratelement in HTML und CSS erstellen. Erstellen Sie einfach ein Element mit dem div-Tag, weisen Sie ihm eine eindeutige ID zu und fügen Sie Stile hinzu, damit es wie ein Quadrat aussieht. Bei Bedarf können Sie die Größe und Farbe des Quadrats jederzeit ändern, indem Sie die CSS-Eigenschaft verwenden.

Passen Sie die Größe eines Quadrats an

Um die Quadratgrößen in CSS anzupassen, können Sie die Eigenschaft width und height verwenden.

Sie können Werte in Pixeln ( px ), Prozentwerten ( % ), Windungen ( vw und vh ) und anderen Maßeinheiten verwenden.

.square

Dadurch wird das Quadrat auf 300 Pixel in der Breite und 300 Pixel in der Höhe festgelegt.

Hinzufügen von Farbe zu einem Quadrat

Sie können die Eigenschaft background-color verwenden, um einem Quadrat Farbe in CSS hinzuzufügen. Mit dieser Eigenschaft können Sie die Hintergrundfarbe des Elements festlegen.

Um eine Farbe für ein Quadrat festzulegen, müssen Sie seine Klasse in der CSS-Datei angeben und die Eigenschaft background-color auf diese Klasse anwenden. Zum Beispiel, wenn die Quadratklasse aufgerufen wird .square , dann könnte der Code zum Festlegen der Farbe wie folgt aussehen:

In diesem Beispiel wird das Quadrat blau gefärbt. Sie können jede in CSS verfügbare Farbe verwenden: Farbname (z. B. blue ), Hexadezimalcode (#0000FF), RGB- oder HSL-Werte.

Wenn Sie einen transparenten Hintergrund festlegen möchten, können Sie den Wert transparent verwenden. Zum Beispiel:

Jetzt hat das Quadrat einen transparenten Hintergrund.

Sie können auch verschiedene Effekte für den Hintergrund eines Elements verwenden, z. B. Farbverläufe, Bilder usw. Dazu müssen Sie andere CSS-Eigenschaften und -Werte verwenden.

Ändern von Quadratumgrenzungsstilen

Sie können den Rahmenstil eines Quadrats mit der Border-style-Eigenschaft ändern. Mit dieser Eigenschaft können Sie aus verschiedenen Rahmenstilen auswählen, z. B. einer durchgezogenen Linie, einer gestrichelten Linie, einer gestrichelten Punktlinie und anderen.

Beispiel für die Verwendung der Border-Style-Eigenschaft :

.square

In diesem Beispiel wird die Grenze des Quadrats mit einem gepunkteten Stil versehen. Sie können auch die Farbe des Rahmens mit der border-color-Eigenschaft und die Rahmenstärke mit der border-width-Eigenschaft festlegen.

Beispiel für die Verwendung der Eigenschaften border-color und border-width :

.square

In diesem Beispiel hat der Rand des Quadrats einen festen Stil, eine rote Farbe und eine Dicke von 2 Pixeln.

Erstellen von Effekten auf einem Quadrat mit Schatten

Die Verwendung von Schatten ermöglicht es Ihnen, verschiedene Effekte und Stilisierungen zu quadrieren. Es gibt mehrere Möglichkeiten, Schatten in CSS hinzuzufügen:

1. Möglichkeit, die Farbe des Schattens festzulegen: Mit der box-shadow-Eigenschaft können Sie einen Farbwert festlegen, z. B. box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5); . Ein solcher Code erzeugt ein Quadrat mit einem Schatten, der 10px nach rechts und 10px nach unten verschiebt, einem Unschärfenradius von 5px und einer durchscheinenden schwarzen Farbe.
2. Möglichkeit zum Festlegen des Schattenwinkels: Mit der box-shadow-Eigenschaft können Sie den Winkel festlegen, unter dem sich der Schatten befindet. Zum Beispiel box-shadow: 4px 4px 10px 1px rgba(0, 0, 0, 0.5); erstellt ein Quadrat mit einem Schatten, der um 4px nach rechts und unten verschoben ist, mit einem Unschärfenradius von 10px, einer Erweiterung von 1px und einer durchscheinenden schwarzen Farbe.
3. Möglichkeit, mehrere Schatten zu kombinieren: Mit der box-shadow-Eigenschaft können Sie mehrere Schatten für ein Quadrat festlegen. Zum Beispiel box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5), -10px -10px 5px rgba(255, 255, 255, 0.5); erstellt ein Quadrat mit zwei Schatten: Ein Schatten wird um 10px nach rechts und unten verschoben, mit einem Unschärfenradius von 5px und einer halbtransparenten schwarzen Farbe, während der andere Schatten um 10px nach links und oben verschoben wird, mit einem Unschärfenradius von 5px und einer halbtransparenten weißen Farbe.

Mit diesen Methoden können Sie verschiedene Effekte und Stilisierungen für Quadrate und andere Elemente auf einer Webseite erstellen.

Hinzufügen einer Quadratanimation

Um eine Animation in CSS zu quadrieren, können wir die Eigenschaft animation verwenden. Mit der Animation können wir verschiedene Bewegungseffekte, Farb- oder Größenänderungen für ein Quadrat festlegen.

Erstellen Sie zunächst ein Quadrat mit CSS:

Fügen Sie nun eine Animation für dieses Quadrat hinzu:

Hier haben wir eine Animation namens Rotate verwendet , die 2 Sekunden lang ist, einen linearen Übergang und eine endlose Wiederholung hat. Sie können einen beliebigen Namen für Ihre Animation verwenden und die Parameter je nach Ihren Bedürfnissen anpassen.

Jetzt beschreiben wir unsere Animation in CSS:

Hier haben wir den @keyframes-Block verwendet, um die Animation zu beschreiben. Innerhalb dieses Blocks haben wir zwei Keyframes definiert – from (Startbild) und to (Endbild). Wir haben das Quadrat mit der transform-Eigenschaft um 360 Grad gedreht.

Jetzt, wenn die Seite geladen wird, dreht sich das Quadrat unendlich um seine Mitte.

Sie können die Animationseinstellungen ändern, um andere Bewegungseffekte zu quadrieren, oder andere Werte für die transform-Eigenschaft verwenden, um die Größe, Drehung oder Verschiebung des Quadrats zu ändern.

Ändern der Form eines Quadrats in eine andere Form

In der Tat ist das Ändern der Form eines Quadrats in eine andere Form in CSS einfach genug. Es gibt mehrere Möglichkeiten, dies zu erreichen.

Die erste Methode besteht darin, die border-radius-Eigenschaft zu verwenden. Mit dieser Eigenschaft können Sie die Ecken eines Elements, einschließlich des Quadrats, abrunden. Um ein Quadrat in einen Kreis zu verwandeln, reicht es aus, den Rundungsradius auf die Hälfte der Breite oder Höhe des Quadrats festzulegen.

.square 

Die zweite Methode ist die Verwendung der transform-Eigenschaft. Mit der transform-Eigenschaft können Sie verschiedene Transformationen auf Elemente anwenden, einschließlich ihrer Form. Sie können die Funktion skew() verwenden, um die Form eines Quadrats in eine andere Form zu ändern, z. B. ein Dreieck.

.square

Die dritte Methode ist die Verwendung der Clip-path-Eigenschaft. Mit der clip-path-Eigenschaft können Sie abgeschnittene Formen erstellen. Um die Form eines Quadrats in eine andere Form zu ändern, müssen Sie mithilfe der Funktion polygon() eine Trimmregel festlegen. Um beispielsweise ein Dreieck zu erhalten, müssen Sie die Koordinaten seiner Eckpunkte angeben.

.square

Daher ist es möglich, die Form eines Quadrats in CSS in eine andere Form zu ändern, indem die Eigenschaften border-radius , transform und clip-path verwendet werden. Jede dieser Eigenschaften bietet verschiedene Möglichkeiten, um das gewünschte Ergebnis zu erzielen. Versuchen Sie, sie zusammen oder getrennt zu verwenden, um einzigartige und interessante Formen zu erstellen.