码迷,mamicode.com
首页 > Web开发 > 详细

CSS实现带有三角小箭头的矩形效果

时间:2016-01-02 16:30:14      阅读:488      评论:0      收藏:0      [点我收藏+]

标签:

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">&#9670</div>
    <div class="y">&#9670</div>
  </div>
</div>
</body>
</html>

 

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11571

更多内容可以参阅:http://www.softwhy.com/divcss/

 

CSS实现带有三角小箭头的矩形效果

标签:

原文地址:http://www.cnblogs.com/come-on/p/5094745.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!