Problem mit Hexagons und Text

[Matthias Apsel]

Hallo Dari971,

Ich habe das Gefuhel der Text und das Hexagon werden als 2 Elemente aufgefasst, wenn mich nicht alles taeuscht.

Ja. Das Hexagon besteht aus einem Rechteck und zwei Dreiecken, letztere realisiert durch die Pseudoelemente ::before bzw. ::after.

Das Pseudolelement ::after (unteres Dreieck) wird nach dem Inhalt gesetzt und verschiebt sich in Abhängigkeit vom Inhalt. Abhilfe schafft das Hinzufügen von left: 0; für die Pseudoelemente.

.hexagon::before,
.hexagon::after {
  content: "";
  position: absolute;
  width: 0;
  left: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
}

Die Farbe des Hexagons sollte sich von dem hellblau ins rot aendern, wenn ich mit dem Cursor drueber gehe. Gehe ich mit dem Cursor runter, sollte das Hexagon wieder hellblau sein.

Also die Hintergrundfarbe background-color.

Bis demnächst
Matthias