求好手写个CSS样式-HTML教程-爱易网页

求好手写个CSS样式

日期：2014-05-17　浏览次数：20963 次

求高手写个CSS样式
http://a.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=8879deb8baa1cd1105e37a248c22e4ca/3801213fb80e7bec244239692f2eb9389a506b99.jpg
想达到上图这样效果，就像微信或是百度私信

HTML code


<div class="left_usr_wrap">
<img class="usr_head" />
<div class="left_say_icon"></div>
<div class="content">hello world</div>
</div>

那个自适应向左箭头怎么处理都有问题，高手帮实现一下
[素材]
data:image/gif;base64,R0lGODlhCAANAKIAAAAAAP///+jv8+Hp7fL4+////wAAAAAAACH5BAEAAAUALAAAAAAIAA0AAAMYGLojq428KKEg2OJMd9/BV33MlZUn+lgJADs=

http://himg.bdimg.com/sys/portrait/item/aaef627567747069703f25.jpg

------解决方案--------------------

HTML code


<!doctype html>
<html>
<head>
<style>
#page {width:300px;height:100px;margin:200px;padding:0px;border:1px solid black;}
#imge {width:100px;height:100px;float:left;}
#talkbubble {
   float:left;
   margin-left:20px;
   margin-top:20px;
   width: 120px; 
   height: 80px; 
   background: red;
   position: relative;
   -moz-border-radius:    10px; 
   -webkit-border-radius: 10px; 
   border-radius:         10px;
}
#talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid red;
   border-bottom: 13px solid transparent;
}
</style>
</head>
<body>
<div id="page">
<div id="imge"><img src="http://himg.bdimg.com/sys/portrait/item/aaef627567747069703f25.jpg" />
</div>
<div id="talkbubble"></div>
</div>
</body>
</html>

------解决方案--------------------

HTML code
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="gb2312" />
        <title></title>
        <link rel="stylesheet" href="http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css" />    
        <style>
            body {font-size:12px;}
            .rel { position:relative; }
            .abs { position:absolute; }
            
            .arr {
                display:inline-block;
                width:0; height:0; overflow:hidden;
                border:7px dashed transparent;
            }
            .arr-r {
                border-right:7px solid red;
            }
            .wrap {
                margin:100px;
                padding:10px;
                width:200px;
                border:1px solid #999;
                background:#f3f8fc;
            }
        </style>        
    </head>
    <body>
        <div class="rel wrap">
            <p>
                测试测试测试测试测试测试测试测试测试测试测试测试测试测试
                测试测试测试测试测试测试测试测试测试测试测试测试测试测试
                测试测试测试测试测试测试测试测试测试测试测试测试测试测试
                测试测试测试测试测试测试测试测试测试测试测试测试测试测试
            </p>
            <span class="abs arr arr-r" style="left:-13px; top:50px; z-index:1; border-right-color:#f3f8fc;"></span>
            <span class="abs arr arr-r" style="left:-14px; top:50px; border-right-color:#000;"></span>
        </div>
    </body>
</html>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

求好手写个CSS样式

相关资料更多>

推荐阅读更多>