想达到像微信或是百度私信这样的效果，如下：
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>
<p>
测试测试测试测试测试测试测试测试测试测试测试测试测试测试
测试测试测试测试测试测试测试测试测试测试测试测试测试测试
测试测试测试测试测试测试测试测试测试测试测试测试测试测试
测试测试测试测试测试测试测试测试测试测试测试测试测试测试
</p>
<span style="left:-13px; top:50px; z-index:1; border-right-color:#f3f8fc;"></span>
<span style="left:-14px; top:50px; border-right-color:#000;"></span>
</div>
</body>
</html>
此文转载自：Web开发之答疑解惑源www.znjcx.com，如需转载，请注明原文（微信或百度私信的效果）出处：http://www.znjcx.com/html/y2012/3036_effect-of-micro-letter-or-personal-letter-selfish-baidu.html，谢谢！
更多热门文章：
1.asp如何在线生成excel并加密？
2.如何用JQuery弹出小窗口(注册页面)？
3.一些关于asp函数的小问题
4.asp复选框的状态改变问题
5.关于按钮onClick事件的写法
本文链接：https://my.lmcjl.com/post/20091.html
4 评论