I'm adapting the CSS used to create a speech bubble. The CSS source is http://forrst.com/posts/How_to_Make_a_Pure_CSS_Speech_Bubble_With_a_Drop-PU1. I'm changing the background of the bubble to white, and adding an orange border. My problem is I can't get the border around the triangle along the bottom of the bubble to display. The triangle itself should be white (#fff) and the border is #DD4814. Screenshot below and Fiddle here: http://jsfiddle.net/tuGHT/. Does anyone have an idea on appropriate CSS, please?
CSS\[code\].bubble {background-color: #fff;border-radius: 7px;border: 2px solid #DD4814;box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5), 4px 4px 0 hsla(0,0%,0%,.1);color: #333;display: inline-block;font-family: Ubuntu, sans-serif;font: 16px/25px;padding: 15px 25px;position: absolute;right: 20px;}.bubble:after, .bubble:before {border-bottom: 25px solid transparent;border-right: 25px solid #fff;bottom: -25px;content: '';position: absolute;right: 25px;}.bubble:before {border-right: 25px solid hsla(0,0%,0%,.1);bottom: -28px;right: 22px;}\[/code\]HTML\[code\]<span class="bubble">Speech bubble right</span>\[/code\]