So erstellen Sie einfache und erweiterte Formen mit reinem CSS

Haben Sie jemals eine reine CSS-Website gesehen, auf der jedes einzelne Element durch CSS fertiggestellt wird? CSS macht mehr als nur Styling-Elemente. Mit CSS-Formen können Webdesigner benutzerdefinierte Pfade wie Dreiecke, Kreise, Polygone und mehr erstellen. Auf diese Weise sind Sie nicht mehr gezwungen, ein schwebendes Bild mit transparentem Hintergrund einzufügen, nur um von einem rechteckigen Rahmen darum enttäuscht zu werden.

In diesem Artikel verwenden wir CSS-Formen und einige Funktionswerte, um verschiedene Formen zu codieren.

Zeichnen grundlegender CSS-Formen

Beginnen wir mit den Grundformen wie Quadrat, Rechteck, Dreieck, Kreis und Ellipse.

Quadrat und Rechteck

Quadrat und Rechteck sind die einfachsten Formen, die in CSS erstellt werden können. Alles, was Sie tun müssen, ist ein zu erstellen und gib es Höhe und ein Breite.

HTML

CSS

.rec-sq {
Anzeige: flexibel;
Lücke: 2em;
Rand: 2em;
}
.Quadrat {
Breite: 15rem;
Höhe: 15rem;
Hintergrund: RGB (255, 123, 0);
}
.rechteck {
Breite: 24rem;
Höhe: 14rem;
Hintergrund: RGB (0, 119, 128);
}

Ausgabe:

Kreis und Ellipse

Sie müssen nur a zuweisen Grenzradius von 50% zu einem Quadrat und Sie erhalten einen Kreis. Machen Sie dasselbe mit dem Rechteck, um eine Ellipse zu erhalten.

HTML

CSS

.Kreis {
Breite: 15rem;
Höhe: 15rem;
Hintergrund: RGB (255, 123, 0);
Randradius: 50%;
}
.ellipse {
Breite: 24rem;
Höhe: 14rem;
Hintergrund: RGB (0, 119, 128);
Randradius: 50%;
}

Ausgabe:

Dreiecke

Wir verwenden Rahmen, um Dreiecke zu erstellen. Sie fragen sich, wie es funktioniert? Alles, was Sie tun müssen, ist, die Breite und Höhe des Dreiecks auf Null. Es bedeutet, vorwärts zu gehen, die tatsächliche Breite des Elements wird die Breite der Grenze. Außerdem wissen Sie vielleicht bereits, dass die Randkanten 45-Grad-Diagonalen zueinander haben. Geben Sie jedem Rahmen unterschiedliche Farben und stellen Sie drei beliebige von ihnen auf transparent. Letztendlich haben Sie Ihr Dreieck.

HTML

CSS

//allen gemeinsam
Karosserie {
Anzeige: flexibel;
Lücke: 5em;
Rand: 15em;
}.Stichprobe {
Höhe: 8.5em;
Breite: 8.5em;
Rand-Oberseite: 1em solid #9ee780;
Rand rechts: 1em solides RGB (240, 241, 141);
Rand-unten: 1em solides RGB (145, 236, 252);
Rand links: 1em solides RGB (248, 115, 106);
}.dreieck {
Höhe: 0;
Breite: 0;
Rand-Oberseite: 5em solid #9ee780;
Rand rechts: 5em festes RGB (240, 241, 141);
Rand-unten: 5em festes RGB (145, 236, 252);
Rand links: 5em festes RGB (248, 115, 106);
}

Ausgabe:

Du kannst damit herumspielen Höhe und Randfarbe um verschiedene Arten von Dreiecken zu erhalten. Sie können zum Beispiel ein Dreieck erstellen, das nach oben zeigt, indem Sie Grenze-unten eine Volltonfarbe, während alle anderen Ränder auf transparent eingestellt sind. Sie können auch ein Dreieck erstellen, das in die richtige Richtung zeigt, oder ein rechtwinkliges Dreieck, indem Sie mit herumspielen Rahmenbreite und Randfarbe.

HTML

CSS

.dreieck nach oben {
Höhe: 0;
Breite: 0;
Bordüre-Oberseite: 5em solid transparent;
Rand-rechts: 5em solid transparent;
Rand-unten: 5em festes RGB (145, 236, 252);
Rand-links: 5em einfarbig transparent;
}
.dreieck-rechts {
Breite: 0;
Höhe: 0;
Bordüre-Stil: solide;
Rahmenbreite: 4em 0 4em 8em;
Rahmenfarbe: transparent transparent transparent rgb (245, 149, 221);
}
.dreieck-unten-rechts {
Breite: 0;
Höhe: 0;
Bordüre-Stil: solide;
Rahmenbreite: 8em 0 0 8em;
Rahmenfarbe: transparent transparent transparent rgb (151, 235, 158);
}

Ausgabe:

Erstellen erweiterter Formen mit CSS

Sie können verwenden ::Vor und ::nachPseudo-Elemente um erweiterte Formen zu erstellen. Mit der intelligenten Verwendung von Positions- und Transformationseigenschaften können Sie mit reinem CSS ganz einfach komplexe Formen erstellen.

Sternform (5-Punkte)

Sie müssen die Ränder mit dem Rotationswert der Transformation manipulieren. Die Idee ist, zwei Seiten mit a. zu erstellen Klasse = "Stern", die anderen beiden Seiten mit dem ::nach -Element und die letzte Seite mit dem ::Vor Element.

HTML

CSS

.stern-fünf {
Rand: 3.125em 0;
Position: relativ;
Bildschirmsperre;
Breite: 0em;
Höhe: 0em;
Rand-rechts: 6.25em solid transparent;
Rand-unten: 4,3em festes RGB (255, 174, 81);
Rand-links: 6,25em einfarbig transparent;
transformieren: drehen (35deg);
}
.stern-fünf: vor {
Rand-unten: 5em festes RGB (255, 174, 81);
Rand-links: 2em solid transparent;
Rand rechts: 1.875em massiv transparent;
Position: absolut;
Höhe: 0;
Breite: 0;
oben: -45px;
links: -65px;
Bildschirmsperre;
Inhalt: '';
transformieren: drehen (-35deg);
}
.stern-fünf: nach {
Position: absolut;
Bildschirmsperre;
oben: 3px;
links: -105px;
Breite: 0;
Höhe: 0;
Rand-rechts: 6.25em solid transparent;
Rand-unten: 4,3em festes RGB (255, 174, 81);
Rand-links: 5,95 em einfarbig transparent;
transformieren: drehen (-70deg);
Inhalt: '';
}

Ausgabe:

Pentagon

Sie können ein Fünfeck erstellen, indem Sie ein Trapez und ein Dreieck kombinieren. Verwenden Grenze und Positionseigenschaften formen und gruppieren.

HTML

CSS

.fünfeck {
Position: relativ;
Breite: 10em;
Box-Größe: Inhalt-Box;
Rahmenbreite: 10em 5em 0;
Bordüre-Stil: solide;
Rahmenfarbe: rgb (7, 185, 255) transparent;
Rand-oben: 20rem;
Rand links: 10rem;
}
.fünfeck: vor {
Inhalt: "";
Position: absolut;
Höhe: 0;
Breite: 0;
oben: -18em;
links: -5em;
Rahmenbreite: 0 10em 8em;
Bordüre-Stil: solide;
Rahmenfarbe: transparent transparent rgb (7, 185, 255);
}

Ausgabe:

Diamant

Gruppieren Sie zwei Dreiecke, die nach oben und unten zeigen, mit Position, um eine Rautenform zu erstellen. Ja, wir verwenden die Grenze Eigenschaften, um diese Dreiecke zu erstellen.

HTML

CSS

.diamant {
Breite: 0;
Höhe: 0;
Position: relativ;
oben: -3em;
Umrandung: 3em einfarbig transparent;
Rahmenfarbe unten: rgb (129, 230, 255);
}
.diamant: nach {
Inhalt: '';
Breite: 0;
Höhe: 0;
Position: absolut;
links: -3em;
oben: 3em;
Umrandung: 3em einfarbig transparent;
Rand-Oberseite-Farbe: rgb (129, 230, 255);
}

Ausgabe:

Sie können eine Diamantschildform erstellen, indem Sie die Höhe des oberen Dreiecks wie unten gezeigt ändern:

HTML

CSS

.Diamant-Schild
{
Breite: 0;
Höhe: 0;
Umrandung: 3em einfarbig transparent;
Rand-unten: 1.25em solides RGB (71, 194, 231);
Position: relativ;
oben: -3em;
}
.Diamantschliff: nach {
Inhalt: '';
Position: absolut;
links: -3em;
oben: 1,25em;
Breite: 0;
Höhe: 0;
Umrandung: 3em einfarbig transparent;
Rand oben: 4.4em solides RGB (71, 194, 231);
}

Ausgabe:

Herz

Die Herzform ist etwas hart, aber Sie können es tun, indem Sie ::Vor und ::nach Pseudo-Elemente. Sie können verschiedene Werte von verwenden verwandeln um sie aus verschiedenen Winkeln zu drehen, bis sie perfekt eine Herzform bilden. Letztendlich können Sie einstellen Transformations-Ursprung um den Punkt festzulegen, um den die Transformation angewendet wird.

HTML

CSS

.Herz {
Breite: 6,25 em;
Höhe: 55em;
Position: relativ;
}
.herz: vorher,
.herz: nach {
Inhalt: "";
Breite: 3em;
Höhe: 5m;
Position: absolut;
links: 3em;
oben: 0;
Hintergrund: rot;
Randradius: 3em 3em 0 0;
transformieren: drehen (-45deg);
Transformations-Ursprung: 0 100 %;
}
.herz: nach {
links: 0;
transformieren: drehen (45deg);
Transformations-Ursprung: 100 % 100 %;
}

Ausgabe:

Experimentieren Sie mit reinen CSS-Formen

Sie sollten jetzt mit verschiedenen reinen CSS-Bildern vertraut sein, die durch das Schreiben einiger Codezeilen erstellt werden können. Das Erstellen einer superschnellen Website ist keine hektische Aufgabe mehr, da Sie wissen, wie man mit dem Code herumspielt. Das Beste daran ist, dass Sie mit der Stimme der Marke mitschwingen können, indem Sie verschiedene Formen und Farben nach Ihren Wünschen manipulieren. Experimentieren Sie daher weiter und entdecken Sie neue Möglichkeiten, um großartige Formen rein mit CSS zu zeichnen.

So erstellen Sie eine responsive Navigationsleiste mit HTML und CSS

Aufruf an alle Anfänger-Webentwickler: Dieses Tutorial vermittelt Ihnen die Fähigkeiten, die Sie benötigen, um Ihre eigenen reaktionsschnellen Navbars nur mit HTML und CSS zu erstellen!

Weiter lesen

Über den Autor