Dynamische Sprechblase in CSS

Ich versuche so etwas zu machen:

Ich würde gerne reines CSS verwenden. Bootstrap v3 ist bereits geladen.

Ich habe mit so etwas wie @ ziemlich nahe gekomm

.bubble {
                   position:relative;
                   left: 15px;
                   padding: 10px;
                   background: #FFFFCC;
                   margin: 5px 5px;
                   max-width: 250px;
                   border: #FFCC00 solid 1px;
                }

.bubble:before {
                   position:absolute;
                   content: ""; 
                   top:15px;left:-10px;
                   border-width: 10px 15px 10px 0px;
                   border-color: transparent  #FFFFCC;
                   border-style: solid;
                 }

Aber das Ergebnis ist nicht ganz das, wonach ich suche.

Ich habe ein bisschen gesucht und herumgespielt, aber keine elegante Lösung gefunden, die meinen Bedürfnissen entspricht.

Vor Jahren hätte ich das mit Tabellen und Bildern gemacht, aber es gibt sicher einen besseren Weg im Jahr 2015?

Antworten auf die Frage(2)

Ihre Antwort auf die Frage