Czysta dymka CSS z obramowaniem

Question

Pracuję więc nad czystym bąblem CSS http://bit.ly/zlnngM, ale chciałabym, aby obramowanie otaczało całą bąbelkę mowy widzianą tutaj http://bit.ly/zUgeZi. Używam poniższego znacznika;

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

i jak dotąd zaprojektowałem go w następujący sposób;

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

Jak widać Mogę tylko dodać obramowanie do pola treści (.speech-bubble), ale nie objaśnienia (.speech-bubble: przed) Moja granica będzie musiała być przezroczysty. Nie jestem pewien, czy to ma znaczenie, ale warto o tym pamiętać. Jakakolwiek rada?

Answer 1

Jesteś całkiem blisko. Musisz tylko użyć :before i :after, aby ułożyć kolejną trójkątną ramkę.

Oto jsfiddle: http://jsfiddle.net/rgthree/DWxf7/ i CSS używane:

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