ü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.

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:

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:

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;
}

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:

.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; 
}

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; 
}