nicht angemeldet
Nur durch CSS Umsetzbar?
0 
Gunnar Bittersmann
0 0 Gunnar Bittersmann
0 0 0 Gunnar Bittersmann
0
0 Gunnar Bittersmann
Nur durch CSS Umsetzbar?
Der MartinGuten Morgen,
kann ich diese Grafik nur durch CSS nachbilden? Der Pfeil nach unten soll immer in der Mitte sein.
akzeptierte Antworten
Nur durch CSS Umsetzbar?
Bewertung: keine Bewertung
Nur durch CSS Umsetzbar?
Bewertung: keine Bewertung
-
@@Derk
kann ich diese Grafik nur durch CSS nachbilden? Der Pfeil nach unten soll immer in der Mitte sein.
Ja, auf verschiedene Weisen:
-
mit
border, siehe The Shapes of CSS -
mit
linear-gradient, Bsp.background: linear-gradient(to left bottom, green 50%, transparent 50%), evtl. mitbackground-position/background-size -
ein um 45° gedrehtes Quadrat:
transform: rotate(45deg) -
(Inline-)SVG
-
…
Jeweils angewendet auf ein oder zwei Pseudoelemente
::before/::after.LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
@@Gunnar Bittersmann
1. mit
border, siehe The Shapes of CSS2. mit
linear-gradient, Bsp.background: linear-gradient(to left bottom, green 50%, transparent 50%), evtl. mitbackground-position/background-sizeBeide Varianten haben den Nachteil, dass das Ergebnis – zumindest auf nicht-hochauflösenden Displays – scheußlich aussieht (verpixelt). Weder
bordernochlinear-gradientsind für schräge Kanten gedacht; Browser machen kein Anti-Aliasing.3. ein um 45° gedrehtes Quadrat:
transform: rotate(45deg)4. (Inline-)SVG
Damit sieht’s vernünftig aus.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.-
Hallo,
3. ein um 45° gedrehtes Quadrat:
transform: rotate(45deg)4. (Inline-)SVG Damit sieht’s vernünftig aus.dann habe ich eine Grafik was total unnötig ist.
-
@@Derk
3. ein um 45° gedrehtes Quadrat:
transform: rotate(45deg)
4. (Inline-)SVG Damit sieht’s vernünftig aus.dann habe ich eine Grafik was total unnötig ist.
„Damit sieht’s vernünftig aus“ bezog sich auch auf das gedrehte Quadrat.
Wenn du die Klammern bei „(Inline-)SVG“ weglässt, hast du auch keine externe Grafikdatei, sondern nur sehr wenig Code direkt im Stylesheet.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
-
-
Hallo,
Beide Varianten haben den Nachteil, dass das Ergebnis – zumindest auf nicht-hochauflösenden Displays – scheußlich aussieht (verpixelt).
vermutlich meinst du mit "verpixelt" das, was ich als "gestochen scharf" bezeichnen würde - also einen Übergang ohne aufgeweichte Konturen. Unter "verpixelt" verstehe ich eher den Pixelbrei, der durch Anti-Aliasing an ursprünglich scharfen Kanten entsteht.
Weder
bordernochlinear-gradientsind für schräge Kanten gedacht; Browser machen kein Anti-Aliasing.Und das ist gut so.
Ciao,
Martin
-
-
-
Hallo
kann ich diese Grafik nur durch CSS nachbilden?
Ja. Aber deine Angaben sind leider etwas mager.
Ich habe mal ein flexibles Beispiel erstellt, das problemlos angepasst werden kann.
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Sprechblase 01</title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <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 { background: #fff101; /*Von den beiden display-Eigenschaften die gewünschte als letzte schreiben*/ /*Aktuell ist inline-block aktiv*/ display: block; display: inline-block; position: relative; padding: 10px; border: 4px solid #F200FF; border-radius: 5px; } .bubble::after, .bubble::before { top: 100%; left: 50%; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border: solid transparent; } .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
-
@@MrMurphy1
Ich habe mal ein flexibles Beispiel erstellt, das problemlos angepasst werden kann.
Willst du nicht endlich mal selbst deine Vorlage anpassen und den ganzen Bullshit rausschmeißen?
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein. -
Hallo,
vielen lieben Dank für dein Beispiel. Ich werde gleich mal versuchen es bei mir einzubauen. Mein Ansatz war
<div class="inhalt"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p> </div> <div class="inhalt-bottom"><span></span></div>.inhalt { display: flex; background-color: rgba(239, 239, 239, 0.47); width: 99.5%; padding: 0.5em 1em; } .headline-bottom span { background-color: rgba(239, 239, 239, 0.47); height: 50px; width: 50px; position: absolute; transform: rotate(45deg); bottom: 8px; }-
Hallo,
du brauchst nur aus meinem Quelltext die CSS-Anweisungen mit ".bubble" übernehmen
.bubble { background: #fff101; /*Von den beiden display-Eigenschaften die gewünschte als letzte schreiben*/ /*Aktuell ist inline-block aktiv*/ display: block; display: inline-block; position: relative; padding: 10px; border: 4px solid #F200FF; border-radius: 5px; } .bubble::after, .bubble::before { top: 100%; left: 50%; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border: solid transparent; } .bubble::after { border-top-color: #fff101; border-width: 30px; margin-left: -30px; } .bubble::before { border-top-color: #F200FF; border-width: 36px; margin-left: -36px; }und folgenden HTML-Quelltext:
<div class="bubble"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p> </div>An deinem bisherigen Lösungsansatz ist nicht schön, dass zusätzliche Elemente nur für das CSS benötigt werden. Das sollte so weit wie möglich vermieden werden.
Gruss
MrMurphy
-
-
Hallo,
du brauchst nur aus meinem Quelltext die CSS-Anweisungen mit ".bubble" übernehmen
habe ich versucht, allerdings benötigt dein Beispiel
.bubble { /*Von den beiden display-Eigenschaften die gewünschte als letzte schreiben*/ /*Aktuell ist inline-block aktiv*/ display: block; display: inline-block; }Ich benötige allerdings
.bubble { display: flex; }ansonsten müsste ich die <p></p> mit float nebeneinander bringen.
-
Hallo
Ich benötige allerdings ... display: flex;
Das kannst du doch angeben. Einfach die beiden Anweisungen dadurch ersetzen oder "display: flex;" unter sie schreiben.
Wie ich bereits schrieb
Aber deine Angaben sind leider etwas mager.
Wenn du in deiner Frage nichts von Flexbox schreibst kann ich das auch nicht berücksichtigen.
Gruss
MrMurphy
-
Hallo,
Wenn du in deiner Frage nichts von Flexbox schreibst kann ich das auch nicht berücksichtigen.
habe ich doch: https://forum.selfhtml.org/self/2015/oct/9/nur-durch-css-umsetzbar/1651870#m1651870
-
Hallo,
ok es hat geklappt
.inhalt { display: flex; position: relative; background-color: rgba(239, 239, 239, 0.47); width: 99.5%; padding: 0.5em 1em; } .inhalt::after { top: 100%; left: 50%; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border: solid transparent; border-top-color: rgba(239, 239, 239, 0.47); border-width: 30px; margin-left: -30px; }In deinem Beispiel war noch ein ::before benötige ich in meinem Fall nicht.
<div class="inhalt"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p> </div>Danke für deine Hilfe.
-
@@Derk
ok es hat geklappt
Du solltest deine ursprüngliche Idee mit dem gedrehten Quadrat weiterverfolgen.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
-
-
-
-
-
@@Derk
.headline-bottom span { background-color: rgba(239, 239, 239, 0.47); height: 50px; width: 50px; position: absolute; transform: rotate(45deg); bottom: 8px; }Wie kommst du auf die
8px? Magic number?Besser ist, die Maße des Quadrats zu verwenden, ich hab das mal gemacht.
LLAP 🖖
--
Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
-
-