Responsive CSS3 speech bubble

Die meißten HTML Sprechblasen werden durch feste Größen definiert. In diesem Beispiel zeige ich, wie man dass CSS so anpasst, dass es prozentual ausgegeben werden kann. Perfekt für das responsive Design einer HTML5 Webseite.

Zur Browserdarstellung: Ab dem IE 8 wird das Dreick dargestellt. Die Rundungen fehlen aber noch. Diese sind dann bei der 9er Version auch zu sehen. Bei den restlichen Browsern passt es. Um nachzuschlagen welche CSS Eigentschaften genau dargestellt werden, kann ich "Can I use" (mit Beispiel Border-Radius) wärmstens empfehlen.

.sprechblase {
	position: relative;
	width: 30%; /* Prozentweite der Sprechblase */
	min-width: 80px;
	padding: 10px;
	text-align: center;
	background: #fff;
	border: #000 solid 3px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	/* Positionierung zB. 2 nebeneinander */
	float: left;
	margin: 20px 20px 0 0;
}
 
/* Dreieck: weisse Innenfläche */
.sprechblase:after {
	content: "";
	position: absolute;
	z-index: 1;
	display: block;
	width: 0;
	top: -15px;
	left: -15px; /* Hälfe der Dreiecksweite minus Hälfte der Sprechblase */
	margin-left: 50%; /* Hälfte der Sprechblase */
	border-style: solid;
	border-width: 0 15px 15px;
	border-color: #fff transparent;
}
 
/* Dreieck: schwarzer Rahmen */
.sprechblase:before {
	content: "";
	position: absolute;
	z-index: 0;
	display: block;
	width: 0;
	top: -20px;
	left: -17px; /* Hälfe der Dreiecksweite minus Hälfte der Sprechblase */
	margin-left: 50%; /* Hälfte der Sprechblase */
	border-style: solid;
	border-width: 0 17px 17px;
	border-color: #000 transparent;
}
<div class="sprechblase">Das ist die erste Sprechblase mit 30% Weite.</div>
<div class="sprechblase">Hier nun die zweite mit der selben Weite.</div>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

*