使用css完成聊天框的效果

时间：2015-04-06 10:05:09 　来源：免费模板网　作者：风雪　阅读次数　tagscss特效

经常有看到一些网站的留言做的很个性。类似微信聊天对话框的效果，那么css代码怎么编写呢
采用css3的语言框效果，类似于提示框的效果，带尖口的导航更具人性化，不过要实现各种浏览器都兼容的代码，还真不是容易事，在不懈努力下，总算是完成了，只是有些繁琐。这个效果的实现主要用到了transform之中的skew，希望能为CSS学习者提供参考和帮助。

<!doctype html>
<html>
<head>
<title>采用css3的语言框效果</title>
<style>
.wrap{position:relative;}
.bd{
	background:#BDCEEF;width:250px;height:80px;padding:10px;position:relative;z-index:2;
	box-shadow: 5px 8px 11px rgba(0,0,0,0.4); /* 阴影 */
	-webkit-box-shadow: 5px 8px 11px rgba(0,0,0,0.4);
	-moz-box-shadow: 5px 8px 11px rgba(0,0,0,0.4);
	/*filter: progid:DXImageTransform.Microsoft.Shadow(color='#666666', Direction=145, Strength=3)*/ /* ie的阴影滤镜 */
	border-radius: 5px;  /* 圆角 */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
.cor{
	position:absolute;
	z-index:2;
	width:40px;
	height:40px;
	background:#BDCEEF;
	left:30px;bottom:-20px;
	transform: skewY(-45deg); /* 斜切实现尖角  */
	-o-transform: skewY(-45deg);
	-webkit-transform: skewY(-45deg);
	-moz-transform: skewY(-45deg);
}
.cor_s{
	z-index:1;
	box-shadow: 5px 8px 11px rgba(0,0,0,0.4);  /* 尖角处的阴影 */
	-webkit-box-shadow: 5px 8px 11px rgba(0,0,0,0.4);
	-moz-box-shadow: 5px 8px 11px rgba(0,0,0,0.4);
}
</style>

</head>
<body>
<div class='wrap'>
	<div class='bd'>免费模板网（www.freemoban.com）提供编程源码、书籍教程、网页特效代码及常用软件下载。</div>
	<div class="cor"></div>
	<div class="cor cor_s"></div>
</div>
</body>
</html>

上篇：css怎么清除浮动

下篇：使用css制作鼠标经过高亮效果

本文地址：https://www.freemoban.com/bjrm/2015/0406/1213.html

猜你喜欢