纯CSS箭头,气泡

原文日期: 2013年8月5日

翻译日期: 2013年8月9日

本文两种实现方式: 使用或不使用 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;
			margin-left: 30px;
			padding: 30px;
			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: 17px solid transparent;
			border-right: 17px solid #eee;
			border-bottom: 17px solid transparent;
			border-right-color: rgba(0, 0, 0, 0.2);
			left: -18px;
			top: 40px;
			content: '';
		}

		/* 背景阴影*/
		.tip:after {
			position: absolute;
			display: inline-block;
			border-top: 16px solid transparent;
			border-right: 16px solid #eee;
			border-bottom: 16px solid transparent;
			left: -16px;
			top: 41px;
			content: '';
		}
	</style>
</head>
<body>

<div id="contentHolder">
	<h1>CSS 箭头Demo</h1>
	<p>以下代码.是极好的纯 CSS 箭头样式，不使用背景图!</p>
	<div id="position:relative;">
		<div class="arrow-up">向上的箭头</div>
		<br />
		<div class="arrow-down">向下的箭头</div>
		<br />
		<div class="arrow-left">向左的箭头</div>
		<br />
		<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">
			向左的箭头: 只有三个边：上、下、右。而 < | 总体来看，向左三角形的高=上+下边框的长度。 宽=右边框的长度<br />
			向右的箭头: 只有三个边：上、下、左。而 |> 总体来看，向右三角形的高=上+下边框的长度。 宽=左边框的长度<br />
			向上的箭头,类似于A,只有三个边，不能指定上边框
		</div>
	</div>
</div>
</body>
</html>

纯CSS箭头,气泡的更多相关文章

纯CSS 箭头流程，网上找的，留着备用
无意之中看到一个纯CSS做的箭头导航(流程式),收藏一下,以备不时之需实际效果步骤一步骤二步骤三步骤四源代码: HTML: <div class="wrapper" ...
72.纯 CSS 创作气泡填色的按钮特效
原文地址:https://segmentfault.com/a/1190000015560736 感想:过渡效果+xyz中一轴. HTML code: <nav> <ul> & ...
纯css 画气泡
我们知道运用css可以绘画出各式各样的形状:三角形,圆形,正方形,椭圆形,平行四边形等等,而通过他们之间进行两两组合可以变换出各种意想不到的效果图,气泡框就是其中一个.最简单的气泡框就是一个矩形框+一 ...
如何用纯 CSS 创作气泡填色的按钮特效
效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKqZjy 可交互视频 ...
前端每日实战：72# 视频演示如何用纯 CSS 创作气泡填色的按钮特效
效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKqZjy 可交互视频此视频是可 ...
纯CSS实现各类气球泡泡对话框效果
原文纯CSS实现各类气球泡泡对话框效果一.关于纯CSS实现气泡对话框首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一 ...
使用纯CSS实现带箭头的提示框
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...
纯CSS实现tooltip提示框，CSS箭头及形状之续篇--给整个tooltip提示框加个边框
在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...
【技能】使用纯CSS+html写出方向箭头，简单慷慨，好看
使用纯CSS+html写出方向箭头,贴出来就能够用,100%原创 <html> <head> <title></title> <meta http ...

随机推荐

开发一个 app 有多难？
171 个回答默认排序道衍天机有事情的加微信1293190838找我 1,150 人赞同了该回答 ----------------------------------------------- ...
JVM体系结构-----深入理解内存结构
一.概述内存在计算机中占据着至关重要的地位,任何运行时的程序或者数据都需要依靠内存作为存储介质,否则程序将无法正常运行.与C和C++相比,使用Java语言编写的程序并不需要显示的为每一个对象编写对应 ...
模仿天猫实战【SSM版】——项目起步
前言:现在自己的学习似乎遇到了瓶颈,感觉学习了 SSM 之后有一些迷茫,不知道接下来该往哪里去努力了,我觉得这是个很不好的状态,为了度过这段时期,我准备把天猫模仿下来(给自己找点事做)之后开始去巩固 ...
Sublime Text3时间戳查看转换插件的开发
平常配置表中,经常需要用到时间配置,比如活动开始结束.从可读性上,我们喜欢2017-04-27 17:00:00,从程序角度,我们喜欢用1493283600.前者是包含时区概念的,而后者市区无关,所以 ...
html css <input> javaScript .数据类型 JS中的函数编写方式 BOM总结 DOM总结
Day27 html css div 块标签. 特点: 独占一行,有高度和宽度 span 行元素. 特点:在同一行显示,当前行满了自动去下一行显示. 不识别高度和宽度 1.1.1.1 2.输入域标签 ...
Radio Station
B. Radio Station time limit per test: 2 seconds memory limit per test: 256 megabytes input: standa ...
Angular2学习笔记2
每个angular2应用程序默认使用app目录来创建(可以自己制定,但是eclipse插件生成的会自动使用app) 每个程序应当至少有一个angular模块即根模块.根模块使用@NgModule({} ...
Android 如何监听输入法关闭事件
假设有如下界面(输入法的上面的输入区域是用Dialog实现的) 要求当输入法关闭的时候,Dialog也一起关闭,这样用户就不需要返回两次了. 网上找了很多资料都没有很好的解决这个问题,输入法是第三方程 ...
JAVA面向对象-----接口的概述
接口的概述 **接口(interface):**usb接口,主要是使用来拓展笔记本的功能,那么在java中的接口主要是使用来拓展定义类的功能,可以弥补java中单继承的缺点. class Pencil ...
今天我点亮了CSDN博客专家殊荣
很久以前,看着csdn博客学习第一篇博客时,我依旧记得,是一个名叫蒋老夫子的博客专家,文章写的非常认真.内心很崇拜.在想,若干年后,在哪个地方?以什么样的一种状态,也得到此殊荣,华为有句口号,叫勇敢做 ...

纯CSS箭头,气泡

纯CSS箭头,气泡的更多相关文章

随机推荐

热门专题