HTML/CSS Sprechblase

[LukOnline]

Hallo,

ich habe mir für meine Website eine Sprechblase von Demo: Pure CSS speech bubbles – Nicolas Gallagher ausgesucht:

Nur leider scheitere ich etwas am Anpassen...

Ich habe den Rahmen des <div> von 5px auf 3px verringert.

Der Rahmen des Pfeils bleibt allerdings so dick. Ich will ihn aber auch 3px dick haben. Ich habe rausgefunden, dass er aus zwei übereinanderliegenden Dreiecken besteht.

Das untere, randfarbene Dreieck ist größer als das obere. Das obere, kleinere Dreieck ist weiß. Durch die Übelappung wird der Pfeileffekt erzeugt und man denkt, es wäre ein Rand darum.

Ich muss also entweder das untere Dreieck um 2px kleiner machen oder das obere um 2px größer. Nur habe ich echt keine Ahnung, wie das gehen soll. Die Dreiecke verrutschen und verzerren, egal was ich mache.

Bei der Sprechblase werden die Pseudoklassen :after und :before verwendet! Außerdem die CSS-Eigenschaft content. Kennt sich jemand damit aus?

.triangle-border { 	position:relative; 	padding:15px; 	margin:1em 0 3em; 	border:5px solid #5a8f00; 	color:#333; 	background:#fff; 	/* css3 */ 	-webkit-border-radius:10px; 	-moz-border-radius:10px; 	border-radius:10px; }


.triangle-border.right { 	margin-right:30px; }



.triangle-border:before { 	content:""; 	position:absolute; 	bottom:-20px; /* value = - border-top-width - border-bottom-width */ 	left:40px; /* controls horizontal position */     border-width:20px 20px 0; 	border-style:solid;     border-color:#5a8f00 transparent;     /* reduce the damage in FF3.0 */     display:block;      width:0; }  /* creates the smaller  triangle */ .triangle-border:after { 	content:""; 	position:absolute; 	bottom:-13px; /* value = - border-top-width - border-bottom-width */ 	left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */ 	border-width:13px 13px 0; 	border-style:solid; 	border-color:#fff transparent;     /* reduce the damage in FF3.0 */     display:block;      width:0; }


/* creates the larger triangle */ .triangle-border.right:before { 	top:10px; /* controls vertical position */ 	bottom:auto;     left:auto; 	right:-30px; /* value = - border-left-width - border-right-width */ 	border-width:15px 0 15px 30px; 	border-color:transparent #5a8f00; }  /* creates the smaller  triangle */ .triangle-border.right:after { 	top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */ 	bottom:auto;     left:auto; 	right:-21px; /* value = - border-left-width - border-right-width */ 	border-width:9px 0 9px 21px; 	border-color:transparent #fff; }

Vielen Dank schonmal!

LG Luk

Hier noch mein Problem als Bild:

[Ulfmann]

Mein Tipp: Verlauf dich nicht in solch wirren Pixelschubsereien. Hier vielleicht eine Variante, die dir weniger Ärger macht:

Javascript · Bootstrap

[Aras]

Wieso Anzeige über die Logikschicht lösen?

Er muss ja theoretisch nur den border vom triangle-Border von 5px auf 3px verringern

[LukOnline]

Hey, danke für eure Antworten. Leider gab es die Eigenschaft triangle-border nicht^^

Ich habe es jetzt mit ausprobieren endlich hinbekommen!

Was das aber für eine seltsame Pseudo-Klasse ist, das habe ich immer noch nich verstanden xD

LG Luk

[Aras]

.triangle-border { position:relative; padding:15px; margin:1em 0 3em; border:5px solid #5a8f00; color:#333; background:#fff; /* css3 */ -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; }

Steht doch dort.

[LukOnline]

Ja, aber das ist die border der Sprechblase selbst, nicht die des Dreiecks. Ist von den Namen her etwas wirr...

[Ulfmann]

Und verrätst du uns auch deine Lösung? Der Nächste mit diesem Problem wird dir dankbar sein.

[LukOnline]

Sicher doch! Allerdings habe ich einige Klassen zusammengefasst. Sieht etwas anders aus, als das Original, macht aber das gleiche! Habe es mit Hilfe der Kommentare zur Berechnungder Werte hinbekommen.

/* Sprechblase - http://nicolasgallagher.com/pure-css-speech-bubbles/demo/ */


.triangle-border

{

	position: absolute;

	right: 240px;

	top: 300px;

	padding: 10px;

	border: 3px solid #000000;

	color: #000000;

	background: #FFFFFF;

	-webkit-border-radius: 10px;

	-moz-border-radius: 10px;

	border-radius: 10px;

	max-width: 150px;

}


/* creates the larger triangle */

.triangle-border.right:before

{

	content: "";

	position: absolute;

	border-style : solid;

        /* reduce the damage in FF3.0 */

        display: block; 

        width: 0;


	top: 10px; /* controls vertical position */

	bottom: auto;

        left: auto;

	right: -30px; /* value = - border-left-width - border-right-width */

	border-width: 15px 0 15px 30px;

	border-color: transparent #000000;

}


/* creates the smaller  triangle */

.triangle-border.right:after

{

	content: "";

	position: absolute;

	border-style: solid;

        /* reduce the damage in FF3.0 */

        display: block; 

        width: 0;


	top: 13px; /* value = (:before top) + (:before border-top) - (:after border-top) */

	bottom: auto;

        left: auto;

	right: -24px; /* value = - border-left-width - border-right-width */

	border-width: 12px 0 12px 24px;

	border-color: transparent #FFFFFF;

}