zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Dreieck mit CSS unter H3 setzen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.07.2015, 16:55
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.11.2007
Beiträge: 381
ChOpSueY! befindet sich auf einem aufstrebenden Ast
Standard 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;
Auf dieser Seite wird auch erklärt, dass so ein Dreick möglich ist mit CSS,

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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.07.2015, 17:00
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.07.2015, 22:13
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 16.11.2007
Beiträge: 381
ChOpSueY! befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
  #4 (permalink)  
Alt 14.07.2015, 07:30
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
display: inline;
Hast du auch

Zitat:
display: inline-block;
ausprobiert?

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>
Die Klasse .bubble kann natürlich auch direkt durch h3 ersetzt werden, wenn alle h3-Elemente als Sprechblase dargestellt werden sollen.

Gruss

MrMurphy

Geändert von MrMurphy (14.07.2015 um 07:33 Uhr)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:16 Uhr.