如何使用CSS3创建语音 - 气泡边框

Question

我想用下面的图像创建CSS3的程式化边框。但是，我不知道如何？以下是图像：

Answer 1

喜欢这个：http://nicolasgallagher.com/pure-css-speech-bubbles/

.triangle-isosceles { 
    position:relative; 
    padding:15px; 
    margin:1em 0 3em; 
    color:#000; 
    background:#f3961c; 

    /* css3 */ 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    border-radius:10px; 
    background:-moz-linear-gradient(top, #f9d835, #f3961c); 
    background:linear-gradient(top, #f9d835, #f3961c); 
} 

/* creates triangle */ 
.triangle-isosceles:after { 
    content:""; 
    display:block; /* reduce the damage in FF3.0 */ 
    position:absolute; 
    bottom:-15px; 
    left:50px; 
    width:0; 
    border-width:15px 15px 0; 
    border-style:solid; 
    border-color:#f3961c transparent; 
} 

Answer 2

可以使用CSS3box_round：

.box_round { 
    -webkit-border-radius: 5px; 
      border-radius: 5px; 
} 

尝试this网站:)

Answer 3

<style type="text/css"> 
.comments .comment{ 
    width:10%; 
    margin-bottom:20px; 
} 

.comments .comment p{ 
    margin:0 0 10px 0; 
} 
.bubble{ 
    position:relative; 
    background-color:#CCC; 
    padding:20px; 
    color:#009; 
    border-radius:3px; 
    margin-left:20px; 
} 

.bubble::after{ 
    content:""; 
    display:block; 
    position:absolute; 
    left:-15px; 
    top:15px; 

    width:0px; 
    height:0px; 
    border-top:8px solid transparent; 
    border-bottom:8px solid transparent; 
    border-right:15px solid #CCC; 
} 


</style> 




<div class="comments"> 
    <div class="comment bubble"> 
    <p>This is comment</p> 
    </div> 
</div>