您的位置
主页 > 网站技术 > CSS/HTML > » 正文

纯CSS实现箭头、气泡让提示功能具有三角形图标

2013-08-15 13:18 来源: 站长圈 点击:

点评：准备添加tooltips提示信息效果.实现很容易，但我想要让提示功能具有三角形的指示图标，本文两种实现方式: 使用或不使用 before 和 :after 伪元素，示例如下，有此需求的朋友可以参考下演示地址：CSS Triangles Demo 
本文两种实现方式: 使用或不使用 before 和 :after 伪元素(伪类,pseudo-elements) 
 
最近重新设计了我的网站，准备添加tooltips提示信息效果.实现很容易，但我想要让提示功能具有三角形的指示图标。 
当我重新思考想要所设计的每个图标颜色都随心所欲的时候，采用图片那就是一场灾难。 
幸运的是, MooTools 的核心开发者 Darren Waddell介绍了一个强大的技巧给我：CSS三角形.只使用纯CSS语言，你就能创建兼容各个浏览器的三角形，用很少的代码。 
 
不使用伪类的 CSS 代码如下: 
 
复制代码代码如下:
/* 向上的箭头,类似于A,只有三个边，不能指定上边框 */ 
div.arrow-up { 
width: 0; 
height: 0; 
border-left: 5px solid transparent; /* 左边框的宽 */ 
border-right: 5px solid transparent; /* 右边框的宽 */ 
border-bottom: 5px solid #2f2f2f; /* 下边框的长度|高,以及背景色 */ 
font-size: 0; 
line-height: 0;} 
/* 向下的箭头 类似于 V */ 
div.arrow-down { 
width: 0; 
height: 0; 
border-left: 20px solid transparent; 
border-right: 20px solid transparent; 
border-top: 20px solid #f00; 
font-size: 0; 
line-height: 0; 
} 
/* 向左的箭头: 只有三个边：上、下、右。而 <| 总体来看，向左三角形的高=上+下边框的长度。 宽=右边框的长度 */ 
div.arrow-left { 
width: 0; 
height: 0; 
border-bottom: 15px solid transparent; /* 下边框的高 */ 
border-top: 15px solid transparent; /* 上方边框的高 */ 
border-right: 10px solid yellow; /* 右边框的长度|宽度，以及背景色 */ 
font-size: 0; 
line-height: 0; 
} 
/* 向右的箭头: 只有三个边：上、下、左。而 |> 总体来看，向右三角形的高=上+下边框的长度。 宽=左边框的长度 */ 
div.arrow-right { 
width: 0; 
height: 0; 
border-bottom: 15px solid transparent; /* 下边框的高 */ 
border-top: 15px solid transparent; /* 上方边框的高 */ 
border-left: 60px solid green; /* 左边框的长度|宽度，以及背景色 */ 
font-size: 0; 
line-height: 0; 
} 
 
其中的秘密，就是这些三角形在你要指向的方向垂直的两边, 有巨大的边框,而让背面的边框设置为你喜欢的颜色即可。 
边框越大，三角形就越大。调整三个边框的长度，就可以构建出各种不同的三角形。如果加上旋转，不知道似的否可以指定各种不同方向的图形? 
当然，这个处理方法优越的地方就在于代码量非常少，同时非常灵活。 
 
带有 :before 和 :after 的CSS三角形
前面的例子可以很好的工作，但是如果你想要不只是一个三角形怎么办？比如气泡对话框，那么可以使用伪类来实现CSS三角形箭头，对于弹出的提示信息来说非常完美，代码如下： 
 
复制代码代码如下:
div.tooltip { 
/* tooltip content styling in here; nothing to do with arrows */ 
} 
/* shared with before and after */ 
div.tooltip:before, div.tooltip:after { 
content: ' '; 
height: 0; 
position: absolute; 
width: 0; 
border: 10px solid transparent; /* arrow size */ 
} 
/* 向上的箭头 */ 
/* top-stacked, smaller arrow */ 
div.tooltip:before { 
border-bottom-color: #fff; /* arrow color */ 
/* positioning */ 
position: absolute; 
top: -19px; 
left: 255px; 
z-index: 2; 
} 
/* arrow which acts as a background shadow */ 
div.tooltip:after { 
border-bottom-color: #333; /* arrow color */ 
/* positioning */ 
position: absolute; 
top: -24px; 
left: 255px; 
z-index: 1; 
} 
 
一般来说在箭头的背面边框指定颜色，也可以只使用 :before 或者 :after 之中的一个。而第二个箭头，可以被当作背景边框，或者作为第一个的阴影。 
我想问自己为什么不早点知道这种技术。这个优雅的技巧肯定会让我在将来大大的提高制作tooltip元素的水平，同时也为我打开了一个广阔的视野。 
 
完整的页面示例代码如下： 
 
复制代码代码如下:
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> 
<head> <title>CSS 箭头Demo</title> 
<style type="text/css"> 
/* 向上的箭头,类似于A,只有三个边，不能指定上边框 */ 
div.arrow-up { 
width: 0; 
height: 0; 
border-left: 5px solid transparent; /* 左边框的宽 */ 
border-right: 5px solid transparent; /* 右边框的宽 */ 
border-bottom: 5px solid #2f2f2f; /* 下边框的长度|高,以及背景色 */ 
font-size: 0; 
line-height: 0; 
} 
/* 向下的箭头 类似于 V */ 
div.arrow-down { 
width: 0; 
height: 0; 
border-left: 20px solid transparent; 
border-right: 20px solid transparent; 
border-top: 20px solid #f00; 
font-size: 0; 
line-height: 0; 
} 
/* 向左的箭头: 只有三个边：上、下、右。而 <| 总体来看，向左三角形的高=上+下边框的长度。 宽=右边框的长度 */ 
div.arrow-left { 
width: 0; 
height: 0; 
border-bottom: 15px solid transparent; /* 下边框的高 */ 
border-top: 15px solid transparent; /* 上方边框的高 */ 
border-right: 10px solid yellow; /* 右边框的长度|宽度，以及背景色 */ 
font-size: 0; 
line-height: 0; 
} 
/* 向右的箭头: 只有三个边：上、下、左。而 |> 总体来看，向右三角形的高=上+下边框的长度。 宽=左边框的长度 */ 
div.arrow-right { 
width: 0; 
height: 0; 
border-bottom: 15px solid transparent; /* 下边框的高 */ 
border-top: 15px solid transparent; /* 上方边框的高 */ 
border-left: 60px solid green; /* 左边框的长度|宽度，以及背景色 */ 
font-size: 0; 
line-height: 0; 
} 
/* 基本样式 */ 
.tip { 
background: #eee; 
border: 1px solid #ccc; 
padding: 10px; 
border-radius: 8px; 
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); 
position: relative; 
width: 200px; 
} 
/* 箭头 - :before and :after, 一起组成了好看的气泡小箭头 */ 
.tip:before { 
position: absolute; 
display: inline-block; 
border-top: 7px solid transparent; 
border-right: 7px solid #eee; 
border-bottom: 7px solid transparent; 
border-right-color: rgba(0, 0, 0, 0.2); 
left: -8px; 
top: 20px; 
content: ''; 
} 
/* 背景阴影*/ 
.tip:after { 
position: absolute; 
display: inline-block; 
border-top: 6px solid transparent; 
border-right: 6px solid #eee; 
border-bottom: 6px solid transparent; 
left: -6px; 
top: 21px; 
content: ''; 
} 
</style> 
</head> 
<body> 
<div id="contentHolder"> 
<h1>CSS 箭头Demo</h1> 
<p>以下代码.是极好的纯 CSS 箭头样式，不使用背景图!</p> 
<div id="position:relative;"> 
<div class="arrow-up">向上的箭头</div> 
 
<div class="arrow-down">向下的箭头</div> 
 
<div class="arrow-left">向左的箭头</div> 
 
<div class="arrow-right">向右的箭头</div> 
</div> 
<h2>CSS 箭头气泡 ，使用 伪类(Pseudo-Element)</h2> 
<div style="position:relative;"> 
<div class="tip"> 
企业级开发首选技术是什么？JavaEE和.Net哪个技术更好？在JavaEE开发中主要用哪些框架？另外在移动大热的趋势下如何开发出一个成功的Android产品？ 
</div> 
<br/> 
<div class="tip"> 
向左的箭头: 只有三个边：上、下、右。而 < | 总体来看，向左三角形的高=上+下边框的长度。 宽=右边框的长度
 
向右的箭头: 只有三个边：上、下、左。而 |> 总体来看，向右三角形的高=上+下边框的长度。 宽=左边框的长度
 
向上的箭头,类似于A,只有三个边，不能指定上边框 
</div> 
</div> 
</div> 
</body> 
</html> 
 



最新图文资讯
相关文章列表:
站长圈推荐文章
推荐帖子
首页 　-　关于站长圈 　-　广告服务 　-　联系我们 　-　关于站长圈 　-　网站地图 　-　版权声明

CopyRight © 2002-2012 站长圈 All Rights Reserved. 锦尚中国旗下垂直站长门户

站长圈 苏ICP备11045993号