求高手写个CSS样式解决思路-HTML教程-爱易网页

求高手写个CSS样式解决思路

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

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



<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

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



<!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>

看看。。。
------解决方案--------------------



<!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>

			<s

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

求高手写个CSS样式解决思路

相关资料更多>

推荐阅读更多>