CSS3圆角气泡框，评论对话框

资料参考 ：http://www.codefans.net/jscss/code/4273.shtml

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>

<style>
#scroller div {
    width:100%;
}
#scroller ul {
    list-style:none;
    padding:0;
    margin:0;
    width:100%;
    text-align:left;
}
#scroller .cardName {
    font: 20px/36px SimHei;
    padding: 0 5px;
}
#scroller li {
    padding:5px 10px;
    background-color:#fafafa;
    font: 14px/20px SimHei;
    color: #535353;
}
#scroller pre{
    width:80%;
    border: 1px solid #c6c6c6;
    word-wrap: break-word;
    padding: 10px;
    font: 14px/20px SimHei;
      color: #535353;
      overflow: auto;
    }
    
.cardCirle{
     overflow: hidden;
     width: 60px; 
     height: 60px; 
     border-radius: 30px; 
     display: inline-block; 
     overflow: hidden;
     background-image: url(../images/microshop/head_image.png);
     background-size: 75px;
     -moz-background-size: 75px;
     background-repeat: no-repeat;
     background-position: center;
     border: 1px solid;
}
.table{
    display:table;
}
.table-cell{
    display: table-cell;
}
.ar{
    text-align: right;
}
.al{
    text-align: left;
}
.triangle-right{
    border-radius: 8px 0 8px 8px;
}
.triangle-right:after {
  top: 8px;
  right: 21px;
  bottom: auto;
  left: auto;
  border-width: 10px 6px 0 0;
  border-color: transparent #fff;
  content: "";
  position: absolute;
  border-style: solid;
}
.triangle-right:before {
  top: 4px;
  right: 20px;
  bottom: auto;
  left: auto;
  border-width: 10px 6px 0 0;
  border-color: transparent #c6c6c6;
  content: "";
  position: absolute;
  border-style: solid;
}
.triangle-left{
    border-radius: 0 8px 8px 8px;
}
.triangle-left:after {
  top: -6px;
  left: 21px;
  bottom: auto;
  right: auto;
  border-width: 10px 0 0 6px;
  border-color: transparent #fff;
  content: "";
  position: absolute;
  border-style: solid;
}
.triangle-left:before {
  top: -10px;
  left: 20px;
  bottom: auto;
  right: auto;
  border-width: 10px 0 0 6px;
  border-color: transparent #c6c6c6;
  content: "";
  position: absolute;
  border-style: solid;
}


</style>
</head>
<body>
<div id="wrapper">
    <div id="scroller">
        <ul id="thelist">
            <li>
                <div class="table card">
                    <span class="table-cell cardName ar">豆豆豆豆度</span>
                    <span class="table-cell cardCirle"></span>
                </div>
                <div style="position: relative;">
                    <pre class="triangle-right" style="float:right;margin-right: 20px;">老板你好！你想买些什么产品呢？你想买些什么产品呢？201以...老板你好！你想买些什么产品呢？201以...老板你好！</pre>
                </div>
                <div style="clear:both"></div>
            </li>
            <li>
                <div>
                    <span class="cardCirle table-cell"></span>
                    <span class="table-cell cardName al">李平安</span>
                </div>
                <div style="position: relative;">
                        <pre class="triangle-left" style="margin-left: 20px;">老板你好！你想买些什么产品呢？201以...老板你好！你想买些什么产品呢？201以...老板你好！你想买些什么产品呢？201以...
                        </pre>
                </div>
            </li>
        </ul>
    </div>
</div>
<div id="footer"></div>

</body>
</html>

运行后的效果：

posted @ 2015-07-28 17:43  梵特姆  阅读(632)  评论(0)  编辑  收藏  举报
---梵------------------特----------------------姆---- ps：原创文章，转载时请注明出处，谢谢！