|
|||
Dreieck mit CSS unter H3 setzen
Hallo Gemeinde,
mich würde interessieren ob man so eine Überschrift mit CSS3 umsetzen kann und wie vor allem: Die Überschrift ist eine H3, für das Styling habe ich bislang das hier verwendet: Code:
background: #fff101; width: 270px; text-align: center; padding: 5px; https://css-tricks.com/examples/ShapesOfCSS/ allerdings weiss ich nicht wie ich am besten das Dreick mittig unter den gelben Kasten bekomme. Vielliecht mit Pseudoklassen? Oder brauche ich Hilfsdiv um das <h3>? Über Tipps würde ich mich sehr freuen, Gruß ChOp |
Sponsored Links |
|
|||
Du solltest mit der ::after Pseudoklasse zu deinem Ergebnis kommen. Also h3::after{hier das CSS für dein Dreieck }
Schaffst du das mit dieser Info oder brauchst du mehr? |
Sponsored Links |
|
|||
Danke hat super geklappt =)
Edit: Doch noch eine Frage: Besteht eine Möglichkeit auf die width-Angabe zu verzichten? Ich würde gerne h3 immer so breit haben wie der Inhalt ist. Dafür müsste ich ja ein display: inline; geben. Wenn ich das mache funktioniert das aber mit dem Dreieick nicht mehr. Gibt es da eine andere Möglichkeit? Andersfalls müsste ich für jede h3 Überschrift die Breite in px definieren - das ist sicher nicht wirklich elegant. Geändert von ChOpSueY! (13.07.2015 um 22:26 Uhr) |
|
|||
Hallo
Zitat:
Zitat:
Ansonsten habe ich die Lösung von cssarrowplease mal angepasst: Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt --> <title>Sprechblase</title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Um alte IE HTML5-tauglich zu machen --> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) --> <style> @media all { /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */ header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { box-sizing: border-box; } html { font-size: 120%; } body { padding: 0; } .bubble { position: relative; background: #fff101; border: 4px solid #F200FF; border-radius: 5px; padding: 10px; display: inline-block; } .bubble:after, .bubble:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .bubble:after { border-top-color: #fff101; border-width: 30px; margin-left: -30px; } .bubble:before { border-top-color: #F200FF; border-width: 36px; margin-left: -36px; } } </style> </head> <body> <h3 class="bubble">Sprechblase mit etwas Text</h3> </body> </html> Gruss MrMurphy Geändert von MrMurphy (14.07.2015 um 07:33 Uhr) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
IE 6 erkennt seine CSS Datei nicht | Perelina | (X)HTML | 4 | 07.08.2009 19:56 |
Vertikale CSS Navigation mit Bildern und Text | macmensa | CSS | 2 | 25.07.2009 17:23 |
Browser auf bestimmte Größe setzen (mit CSS?) | Krischu | CSS | 4 | 03.04.2007 15:43 |
Eric Meyer's CSS | Petty | Ressourcen | 0 | 21.11.2005 09:18 |
Mozilla ignoriert externes css | DarkWanderer | CSS | 9 | 22.09.2005 12:39 |