求好手写个CSS样式

2012-10-14

求高手写个CSS样式http://a.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign8879deb8baa1cd1105e37a248c2

求高手写个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>

热点排行