純粋な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); 
}