Wie bekomm ich das hin ?
- Ersteller johnnyderdepp
- Erstellt am
Cheffchen
Senior HTML'ler
Hallo,
kommt drauf an.
als tooltiopp ist das nicht ganz so leicht aber machbar.
Als design einfach ein bild mit dem dreieck als hintergrund bild und unten/mittig ausrichten.
Der rest wird mit passing und margin gemacht.
schau doch einfach mal nach tooltipp und schau dir die css sachen da zu an.
Cheffchen
kommt drauf an.
als tooltiopp ist das nicht ganz so leicht aber machbar.
Als design einfach ein bild mit dem dreieck als hintergrund bild und unten/mittig ausrichten.
Der rest wird mit passing und margin gemacht.
schau doch einfach mal nach tooltipp und schau dir die css sachen da zu an.
Cheffchen
das geht mit reinem CSS.
gebe dem ::after- oder ::before-Element die richtige Position. Am besten mit position:absolute (die Sprechblase sollte dann am besten auch positioniert sein). Dann gibst du dem ::after- oder ::before-Element folgende Eigenschaften:
border-top: 5px solid #C5C5C5;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
content: "";
Da die verschiedenen Ränder (also linker Rand, rechter ...) immer beim Aufeinandertreffen schräg ineinander übergehen, wird der einzige farbige Rand (farbe musst du noch ändern) als Eck dargestellt.
gebe dem ::after- oder ::before-Element die richtige Position. Am besten mit position:absolute (die Sprechblase sollte dann am besten auch positioniert sein). Dann gibst du dem ::after- oder ::before-Element folgende Eigenschaften:
border-top: 5px solid #C5C5C5;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
content: "";
Da die verschiedenen Ränder (also linker Rand, rechter ...) immer beim Aufeinandertreffen schräg ineinander übergehen, wird der einzige farbige Rand (farbe musst du noch ändern) als Eck dargestellt.
Dreiecke lassen sich auch mit purem CSS erstellen, aber ich hatte das bewusst nicht erwähnt. Weil es sinnvoller ist, das jeweils effektivste Werkzeug für eine Aufgabe zu wählen, und nach Ninja-Tricks zu suchen, nur um den Kontakt mit Scriptsprachen zu vermeiden, ist sowas von 2004.
