Dynamic speech bubble in CSS - html

Question

I'm trying to make something like this:
I'd like to use pure CSS. Bootstrap v3 is already loaded.
I've gotten pretty close with something like
.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;
}
But the result is not quite what I'm looking for.
I've searched around and fiddled a bit, but have not found an elegant solution that fits my needs.
Years ago I would have done this with tables and images, but surely there's a better way in 2015?

Answer 1

Here is a 2015 version...
.bubble {
position: relative;
background: #FFFFCC;
border: 1px solid #FFCC00;
max-width:250px;
padding:10px;
font-family:arial;
margin:0 auto;
font-size:14px;
border-radius:6px;
}
.bubble:after,
.bubble:before {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.bubble:after {
border-color: rgba(255, 255, 204, 0);
border-right-color: #FFFFCC;
border-width: 15px;
margin-top: -15px;
}
.bubble:before {
border-color: rgba(255, 204, 0, 0);
border-right-color: #FFCC00;
border-width: 16px;
margin-top: -16px;
}
SEE IT IN ACTION:
http://jsfiddle.net/ajahb5p1/
NOTE:
You can adjust the size of the arrow simply by changing the border-width and margin-top values in the .bubble:after definition (currently set to 15px and -15px)
To make sure it retains it's border, you would also need to change these same 2 values in the .bubble:before definition (currently set to 16px and -16px)