Bocadillo de diálogo CSS puro con borde

Question

Así que estoy trabajando en un discurso burbuja CSS puro http://bit.ly/zlnngM pero me gustaría que el borde rodee el globo de diálogo completo como se ve aquí http://bit.ly/zUgeZi. Estoy usando el siguiente marcado;

<div class="speech-bubble"><p>This is a speech bubble created using only CSS. No images to be found here...</p></div 

y lo he diseñado hasta el momento de la siguiente manera;

.speech-bubble { 
margin: 3em; 
width: 320px; 
padding: 10px; 
background-color:rgba(250, 250, 250, 0.95); 
color: #666; 
font: normal 12px "Segoe UI", Arial, Sans-serif; 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; 
border: 10px solid rgba(0,0,0,0.095); 
} 

.speech-bubble:before 
{ 
content: ""; 
border: solid 20px transparent; /* set all borders to 10 pixels width */ 
border-top: 0; /* we do not need the top border in this case */ 
border-bottom-color:rgba(250, 250, 250, 0.95); 
width: 0; 
height: 0; 
overflow: hidden; 
display: block; 
position: relative; 
top: -30px; /* border-width of the :after element + padding of the root element */ 
margin: auto; 
} 

.speech-bubble p { 
margin-top: -15px; 
font-size: 1.25em; 
} 

Como se puede ver sólo puedo añadir un borde a la caja de contenidos (.speech-burbuja), pero no la llamada (.speech-burbuja: antes) Mi frontera también tendrá que ser transparente. No estoy seguro de si esto importa, pero es algo a tener en cuenta. ¿Algún consejo?

Answer 1

Estás muy cerca. Solo necesita usar un :before y un :after para superponer otro borde triangular.

Aquí hay una jsFiddle: http://jsfiddle.net/rgthree/DWxf7/ y CSS empleado:

.speech-bubble { 
    position:relative; 
    width: 320px; 
    padding: 10px; 
    margin: 3em; 
    background-color:#FFF; 
    color: #666; 
    font: normal 12px "Segoe UI", Arial, Sans-serif; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    border: 10px solid rgba(0,0,0,0.095); 
} 
.speech-bubble p { 
    font-size: 1.25em; 
} 

.speech-bubble:before, 
.speech-bubble:after { 
    content: "\0020"; 
    display:block; 
    position:absolute; 
    top:-20px; /* Offset top the height of the pointer's border-width */ 
    left:20px; 
    z-index:2; 
    width: 0; 
    height: 0; 
    overflow:hidden; 
    border: solid 20px transparent; 
    border-top: 0; 
    border-bottom-color:#FFF; 
} 
.speech-bubble:before { 
    top:-30px; /* Offset of pointer border-width + bubble border-width */ 
    z-index:1; 
    border-bottom-color:rgba(0,0,0,0.095); 
}