微信或百度私信的效果

原創

2020-06-14 17:28

想達到像微信或是百度私信這樣的效果，如下：
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>