Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

über CSS geometrische Figuren wie Dreieck und Sterne erstellen

Mit der cleveren Anwendung von CSS sind problemlos Figuren wie Dreiecke, Sterne, Herzen und Sprechblasen erzeugbar. Und das tolle dabei ist – wir nutzen reines CSS ohne irgendwelche Grafiken. Die folgenden Figuren werden wir im Tutorial nun Schrittweise erststellen.

Auch wenn der erste Gedanke ist, so groß sind kleine Grafiken ja nicht und es gibt ja auch noch Schriften, die alles Zeichen integriert haben – aber es gibt bestechende Vorteile:

  • keine zusätzliche Grafikdatei (was Ladezeit spart)
  • keinen zusätzlichen Font (was Ladezeit spart)
  • wir können mit CSS weitere Tricks anwenden wie die Farbe oder Größe bei Mausberührung einfach ändern

Daher einfach einmal auf die Möglichkeiten sich einlassen, was die Erstellung von „Grafiken“ über CSS ohne Grafiken einen bietet. Außerdem zeigt es einem viele Kniffe, die man wieder bei anderen Gelegenheiten anwenden kann.

nur über CSS aus Viereck ein Dreieck erstellten ohne Grafiken

Ein Dreieck über CSS

Wir nutzen für unser CSS-Dreieck den typischen Rahmen eines Vierecks, dass bei der Erstellung der CSS-Anweisung border: 5px solid orange; entsteht. Schauen wir uns Schritt für Schritt an, wie das funktioniert. Ist das Prinzip erst einmal klar, können wir es auf alle folgenden Figuren anwenden.

Unser HTML-Bereich, der außer einem leeren DIV-Bereich nichts enthält:

<span class="css-dreieck"></span>

Unserer Rahmen können wir für jede Seite eine eigene Farbe mitgeben. Im folgenden CSS-Code wird die ausführliche Schreibweise genutzt, damit die Zusammenhänge deutlich werden.

.css-dreieck {
  width: 90px;
  height: 90px;
  border-left: 25px solid transparent;

  border-top: 5px solid skyblue;
  border-right: 5px solid limegreen;
  border-bottom: 5px solid orange;
  border-left: 5px solid red;
}

Wie erhalten nun folgende Ausgabe auf dem Bildschirm:

farbiger Rahmen eines Vierecks
farbiger Rahmen eines Vierecks

Aus ein Viereck entstehen 4 Dreiecke

Was passiert, wenn die Rahmen den kompletten verfügbaren Bereich einnehmen? Schon einmal probiert. Unser Viereck hat eine Breite von 90 Pixel. Jetzt bekommen alle Rahmen auch eine Breite von 90 Pixel – es bleibt also theoretisch kein Platz mehr im Viereck:

Viereck mit der Rahmenbreite von 90 wie auch dem Inhalt von 90
Viereck mit der Rahmenbreite von 90 wie auch dem Inhalt von 90

Noch bleibt Platz. Unser Viereck hat also eine komplette Breite von 270 Pixeln. Sprich 90 Pixel für den linken roten Rand, 90 Pixel für den Inhalt und 90 Pixel für den rechten grünen Rand.

Das erhalten wir über folgenden CSS-Code:

.css-dreieck {
  width: 90px;
  height: 90px;

  border-top: 90px solid skyblue;
  border-right: 90px solid limegreen;
  border-bottom: 90px solid orange;
  border-left: 90px solid red;
}

Setzen wir nun einen Rahmen auf Null, erhalten wir je nach Seite ein u, c oder n:

.css-dreieck {
  width: 90px;
  height: 90px;

  border-top: 90px solid skyblue;
  border-right: 0px solid limegreen;
  border-bottom: 90px solid orange;
  border-left: 90px solid red;
}
Unser Viereck mit nur 3 Seitenrahmen
Unser Viereck mit nur 3 Seitenrahmen

Insgesamt haben wir dadurch eine Breite von 90 für den roten Rahmen und dem weißen Inhalt in der Mitte mit 90 Pixeln – also 180 Pixeln.

Wenn wir jetzt die Breite und die Höhe des Elements auf 0 setzen, bleiben nur noch dir Rahmen übrig:

Nur noch Rahmen, der der Inhalt 0 Breite hat
Nur noch Rahmen, der der Inhalt 0 Breite hat
.css-dreieck {
  width: 0px;
  height: 0px;

  border-top: 90px solid skyblue;
  border-right: 0px solid limegreen;
  border-bottom: 90px solid orange;
  border-left: 90px solid red;
}

Und jetzt können wir alle (bis auf das gewünschte) Dreiecke auf transparent setzen (das auf 0 gesetzte Dreieck wird wieder auf Breite gebracht).

.css-dreieck {
  width: 0px;
  height: 0px;

  border-top: 90px solid transparent; /* skyblue */
  border-right: 90px solid transparent; /* limegreen;  */
  border-bottom: 90px solid transparent; /* orange; */
  border-left: 90px solid red; 
}
Dreieck rein über CSS erstellt
Dreieck rein über CSS erstellt

Und jetzt können wir mit der Breite und der Höhe des Dreiecks spielen. Dazu wird die Breite über den Rahmen des ausgewählten Dreiecks festgelegt und die Höhe über die 2 anliegenden auf Transparent gestellten Dreiecke. Einfach einmal probieren!

Anmerkung: das dem sichtbaren gegenüberliegende Dreieck wird eigentlich nicht benötigt und kann auch störend beim Design wirken – daher am besten dieses bei der Rahmenstärke auf 0 setzen.

Farbe ändern, wenn der Mauszeiger das Dreieck berührt

Wir können wir gewohnt alle CSS-Aktionen einsetzen wie beispielsweise das umfärben, wenn der Mauszeiger über unser Dreieck fährt.

.css-dreieck {
  width: 0px;
  height: 0px;

  border-top: 90px solid transparent; /* skyblue */
  border-right: 0px solid transparent; /* limegreen;  */
  border-bottom: 90px solid transparent; /* orange; */
  border-left: 90px solid red; 
}

.css-dreieck:hover {
  border-left: 90px solid darkred; 
}

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe