带边框的纯CSS语音泡泡

Question

所以我正在研究一个纯粹的css语音泡泡http://bit.ly/zlnngM，但我想让边框环绕整个对话泡泡，如http://bit.ly/zUgeZi所示。我使用以下标记;

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

我到目前为止的样式如下;

.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; 
} 

正如你看到的，我只能将边框添加到内容框（.speech泡），但没有标注（.speech泡：之前）我的边框还需要TRANSPARANT。不知道这是否重要，但要牢记。有什么建议？

Answer 1

你非常接近。您只需要同时使用:before和:after来叠加另一个三角形边框。

这里有一个的jsfiddle：http://jsfiddle.net/rgthree/DWxf7/和所使用的CSS：

.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); 
}