CSS实现带有三角小箭头的矩形效果:
现在比较流行带有小箭头的矩形效果，比如鼠标放上去弹出的提示效果，还有微信类似的对话内容等，从视觉上较为美观，也比较人性化，如果是CSS3的话比较容易实现，但是当前还存在着很大的浏览器兼容性，下面介绍一种能够兼容所有的浏览器的代码。
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
.w
{
width:200px;
position:absolute;
background:#999;
left:400px;
top:200px;
font-size:12px;
text-align:left
}
.x
{
width:180px;
position:relative;
background:#ff9;
border:1px solid #F96;
padding:10px;
left:-4px;
top:-4px;
}
.y, .z
{
position:absolute;
left:130px;
}
.y
{
color:#ff9;
top:-6px;
}
.z
{
color:#f96;
top:-7px;
}
</style>
</head>
<body>
<div class="w">
<div class="x">
<p>蚂蚁部落欢迎您</p>
<div class="z">◆</div>
<div class="y">◆</div>
</div>
</div>
</body>
</html>
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11571
更多内容可以参阅:http://www.softwhy.com/divcss/
时间： 2024-08-07 17:00:09