CSS Talk Bubble configured by classes. Defaults to square shape,no triangle. Height is auto-adjusting to the height of the text.

This one adds a right triangle on the left,flush at the top by using .tri-right and .left-top to specify the location.

This talk-bubble uses .left-in class to show a triangle on the left slightly indented. Still a blocky square.

And now using .round we can smooth the sides down. Also uses .btm-left to show a triangle at the bottom flush to the left.

Now we add a border and it looks like a comic. Uses .border .round and .btm-left-in

Now flipped the other way and square. Uses .border and .btm-right-in

Flush to the bottom right. Uses .btm-right only.

Moving our way back up the right side indented. Uses .round and .right-in

And finally on the right flush at the top. Uses .round .border and .right-top