如何用CSS3创建语音泡泡边框

时间:2013-03-14 15:49:21

标签: css css3

我想用CSS3创建一个风格化的边框,如下图所示。但是,我不知道怎么样?这是图像:

3 个答案:

答案 0 :(得分: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;
}

答案 1 :(得分: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>

答案 2 :(得分:0)

您可以使用 CSS3 box_round

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

尝试this网站:)