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

Question

我想用 CSS3 创建一个风格化的边框，如下图所示。但是，我不知道怎么做？这是图像：

Answer 1

<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>

Answer 2

像这样： 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 3

你可以使用CSS3 box_round：

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

试试这个网站:)