Ein Fünfeck ist eine geometrische Figur, die aus fünf Seiten und fünf Ecken besteht. In CSS kann es schwierig erscheinen, eine solche Form zu erstellen. Mit dem richtigen Ansatz und ein wenig Arithmetik können Sie jedoch problemlos ein Fünfeck auf Ihrer Website erstellen.
Zunächst benötigen Sie einen Behälter, in dem sich das Fünfeck befindet. Es könnte ein Block sein oder ein anderes Element, das Sie auswählen. Dann verwenden wir das Pseudoelement ::before um ein Fünfeck zu erstellen.
Um eine Fünfeckform zu erstellen, müssen Sie spezielle CSS-Regeln auf das Pseudoelement anwenden ::before. Sie können die Breite und Höhe des Elements sowie die Farbe oder den Hintergrund für das Fünfeck festlegen. Für die richtige Form müssen Sie auch die Positions- und Transformationswerte des Elements angeben.
Mit dieser Methode können Sie ein Fünfeck erstellen, ohne Bilder oder komplexe Vektordiagramme zu verwenden. Machen Sie Ihre Website einzigartig, indem Sie ungewöhnliche Formen hinzufügen, die die Aufmerksamkeit Ihrer Besucher auf sich ziehen werden!
Erstellen eines Fünfecks in CSS
Sie können ein Fünfeck in CSS erstellen, indem Sie Folgendes verwenden pseudo-Elemente. Dazu müssen Sie die Eigenschaften anwenden ::before und ::after sowie die entsprechenden Eigenschaftswerte festlegen width, height, border.
.pentagon .pentagon::before,.pentagon::after .pentagon::before .pentagon::after
Der obige Code legt die Breite und Höhe des Fünfecks sowie die Hintergrundfarbe fest. Mit den Pseudoelementen ::before und ::after wird ein Fünfeck erstellt, dessen gerade Seite 70px beträgt. Das transform: rotate(36deg) -Attribut dreht jedes Pseudoelement und setzt die richtigen Winkel.
HTML-Markup für ein Fünfeck
Um ein Fünfeck mit CSS zu erstellen, benötigen Sie das entsprechende HTML-Markup. Im Folgenden finden Sie ein Beispiel für das Markup, das Sie verwenden können:
In diesem Beispiel wird ein externer Container mit der ID "pentagon" verwendet, der fünf untergeordnete Elemente mit den Klassen "side1", "side2", "side3", "side4" und "side5" enthält. Jedes dieser Elemente repräsentiert eine Seite des Fünfecks.
Beachten Sie, dass dieses Markup kein Fünfeck selbst erzeugt. Ihr Ziel ist es, eine Grundlage für das Styling mit CSS zu schaffen. Nachdem Sie diesem Markup Stile hinzugefügt haben, können Sie ein Fünfeck erstellen, das auf der Webseite angezeigt wird.
Zuweisen von Stilen zu einem Fünfeck
Um ein Fünfeck mit CSS zu erstellen, müssen Sie bestimmte Stile definieren, die seine Form und sein Aussehen definieren.
Zuerst können Sie die width-Eigenschaft verwenden, um die Breite eines Fünfecks zu bestimmen. Der Wert dieser Eigenschaft kann abhängig von den Designanforderungen in Pixeln oder Prozentsätzen angegeben werden.
Zweitens kann der Height-Stil verwendet werden, um die Höhe eines Fünfecks zu bestimmen. Diese Eigenschaft kann auch in Pixeln oder Prozentsätzen angegeben werden.
Als nächstes definieren Sie einen Background-Color-Stil, um die Füllfarbe des Fünfecks festzulegen. Sie können Schlüsselwörter wie "red" oder "blue" verwenden oder eine Farbe in hexadezimaler Notation (#RRGGBB) angeben.
Sie können einem Fünfeck auch eine Grenze hinzufügen, indem Sie die Border- Eigenschaft verwenden. Der Border-Wert gibt die Dicke, den Stil und die Farbe der Umrandung des Fünfecks an.
Schließlich können Sie mithilfe der box-shadow-Eigenschaft den Schatten für das Fünfeck anpassen. Der Wert box-shadow gibt den horizontalen und vertikalen Versatz, die Unschärfe, die Ausbreitung und die Farbe des Schattens des Fünfecks an.
Verwenden von Pseudoelementen für ein Fünfeck
Zuerst erstellen wir einen Container, in dem wir ein fabelhaftes Fünfeck haben werden:
Fügen Sie dann die Stile für diesen Container hinzu:
.pentagon <
width: 100px;
height: 0;
border-top: 50px solid #000;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
>
Hier haben wir die Höhe des Containers auf 0 gesetzt, so dass das Fünfeck ohne Unterseite erscheint. Dann haben sie die Breite und Farbe der Oberseite bestimmt. Die äußeren Seiten haben eine dreieckige Form, für die die Parameter festgelegt sind: Die rechte Seite ist 30px breit und die Hintergrundfarbe ist transparent, die linke Seite ist ähnlich.
Als nächstes erstellen wir ein Pseudoelement ::after, das als Grundlage für das Fünfeck dient:
.pentagon::after <
content: "";
width: 0;
height: 0;
border-top: 50px solid #000;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
position: absolute;
top: -50px;
left: 0;
>
Hier haben wir die Größe und Form des Fünfecks festgelegt, die denen des Containers ähnlich sind. Das Pseudoelement wird mit den Eigenschaften position: absolute; , top: -50px; und left: 0; relativ zum Container platziert.
Jetzt haben wir ein Fünfeck, das mit dem Pseudo-Element ::after erstellt wurde. Sie können die Funktionalität erweitern und nach Ihren Wünschen stylen, indem Sie nur ein wenig zusätzlichen CSS-Code hinzufügen.
Adaptives Fünfeck
Um ein adaptives Fünfeck mit CSS zu erstellen, können wir die transform-Eigenschaft verwenden, um die Hauptform zu drehen, und clip-path, um die Form zu beschneiden.
Hier ist ein Beispiel für CSS-Code, der ein Fünfeck erstellt:
.pentagonDieser Code erstellt ein Fünfeck mit einem roten Hintergrund mithilfe der background-color-Eigenschaft: #e74c3c; . Sie können die Abmessungen des Fünfecks mithilfe der Eigenschaften width und height anpassen. Die Eigenschaft position: relative; ermöglicht es uns, die Position des Formulars zu steuern.
Sie können Prozentwerte in den Eigenschaften width , height und clip-path verwenden, um ein Fünfeck anpassungsfähig zu machen. Zum Beispiel:
Auf diese Weise ändert sich das Fünfeck abhängig von der Größe des Bildschirms oder des Containers, in dem es sich befindet.
Jetzt haben Sie den grundlegenden Code, um ein adaptives Fünfeck mit CSS zu erstellen. Sie können mit Größen und Farben experimentieren, um einzigartige Effekte und Stile für Ihre Projekte zu erstellen.
Zusätzliche Eigenschaften für ein Fünfeck
Zusätzlich zu den grundlegenden Eigenschaften wie Breite, Höhe, Farbe und Rahmen können Sie auch andere CSS-Eigenschaften verwenden, um das Fünfeck zu stylen.
Eine der zusätzlichen Eigenschaften, die Sie auf ein Fünfeck anwenden können, ist der Schatten. Mit der box-shadow-Eigenschaft können Sie einem Fünfeck einen Schatten hinzufügen und einen Tiefen- und Volumeneffekt erzeugen. Sie können beispielsweise den folgenden Stil anwenden:
| .pentagon width: 100px; height: 100px; background-color: red; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); > |
Sie können auch andere Eigenschaften ändern, z. B. Position, Wendung und Skalierung das Fünfeck mit den Eigenschaften position , transform bzw.
Sie können die Position eines Elements mit den Werten der position-Eigenschaft - static , relative , absolute oder fixed - festlegen. Mit dem folgenden Stil können Sie beispielsweise das Fünfeck auf die absolute Positionierung festlegen:
| .pentagon width: 100px; height: 100px; background-color: red; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); > |
Mit der transform-Eigenschaft können Sie Drehen, Skalieren, Spiegeln ( scaleX und scaleY ) und Verschieben ( translate ) auf ein Fünfeck anwenden. Zum Beispiel vergrößert der folgende Stil das Fünfeck um das Doppelte:
| .pentagon width: 100px; height: 100px; background-color: red; transform: scale(2); > |
Dies sind nur einige der zusätzlichen Eigenschaften, die Sie zum Stylen und Konvertieren eines Fünfecks in CSS verwenden können. Durch die Kombination verschiedener Eigenschaften können Sie einzigartige Effekte und Animationen erstellen.
