原文地址: CSS Triangles

演示地址：CSS Triangles Demo

原文日期: 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箭头,气泡的更多相关文章

  1. 纯CSS 箭头流程，网上找的，留着备用

    无意之中看到一个纯CSS做的箭头导航(流程式),收藏一下,以备不时之需 实际效果 步骤一 步骤二 步骤三 步骤四 源代码: HTML: <div class="wrapper" ...

  2. 72.纯 CSS 创作气泡填色的按钮特效

    原文地址:https://segmentfault.com/a/1190000015560736 感想:过渡效果+xyz中一轴. HTML code: <nav> <ul> & ...

  3. 纯css 画气泡

    我们知道运用css可以绘画出各式各样的形状:三角形,圆形,正方形,椭圆形,平行四边形等等,而通过他们之间进行两两组合可以变换出各种意想不到的效果图,气泡框就是其中一个.最简单的气泡框就是一个矩形框+一 ...

  4. 如何用纯 CSS 创作气泡填色的按钮特效

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKqZjy 可交互视频 ...

  5. 前端每日实战：72# 视频演示如何用纯 CSS 创作气泡填色的按钮特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/eKqZjy 可交互视频 此视频是可 ...

  6. 纯CSS实现各类气球泡泡对话框效果

    原文 纯CSS实现各类气球泡泡对话框效果 一.关于纯CSS实现气泡对话框 首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一 ...

  7. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  8. 纯CSS实现tooltip提示框，CSS箭头及形状之续篇--给整个tooltip提示框加个边框

    在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...

  9. 【技能】使用纯CSS+html写出方向箭头，简单慷慨，好看

    使用纯CSS+html写出方向箭头,贴出来就能够用,100%原创 <html> <head> <title></title> <meta http ...

随机推荐

  1. Java web 前端面试知识点总结

    经过几家大厂面试,目前成功拿到唯品会offer,分享一下我的面试知识点总结: 耦合性:也称块间联系.指软件系统结构中各模块间相互联系紧密程度的一种度量.模块之间联系越紧密,其耦合性就越强,模块的独立性 ...

  2. SVN错误:SVN Working copy XXX is too old

    出错原因: 这是因为使用了低版本的svn生成了.svn内文件内容,但是,使用高版本svn同步时便出现该问题. 解决方法: 找到报错对应的文件夹,里面有个名为.svn的文件夹,删除这个文件夹(这是svn ...

  3. 文件上传，服务端压缩文件方法，重点是png与gif图片的压缩，保证了透明度与动画

    /// <summary> /// 上传文件帮助类 /// </summary> public class ImageUploadHelper { #region SaveVi ...

  4. H5--Web Worker

    Web Worker是H5的新特性. JS是单线程的,所以在消息队列中如果用户想进行一些阻塞操作,比如时延timeout和定时器interval,或者是数据量较大及处理过程非常长的场景,就很容易出现页 ...

  5. acm几何

    fzu 2231,N个点求构成的平行四边行个数. 题意简重点在优化上 #include <cstdio> #include <iostream> #include <cs ...

  6. 浅谈JS变量声明和函数声明提升

    先来两个问题 很多时候,在直觉上,我们都会认为JS代码在执行时都是自上而下一行一行执行的,但是实际上,有一种情况会导致这个假设是错误的. a = 2; var a; console.log(a); 按 ...

  7. zabbix API基本使用方法介绍

    前言: 以下内容根据zabbix 3.2官方文档总结:https://www.zabbix.com/documentation/3.2/manual/api 此文档只是简单的介绍API的基本使用,关于 ...

  8. SpringMVC之Ajax与Controller交互

    前面学习了拦截器,通过拦截器我们可以拦截请求,做进一步处理之后再往下进行,这里我们使用Ajax的时候会有一个问题就是会把js.css这些静态资源文件也进行了拦截,这样在jsp中就无法引入的静态资源文件 ...

  9. How To determine DDIC Check Table, Domain and Get Table Field Text Data For Value?

     How To determineDDIC Check Table, Domain and Get Table Field Text Data For Value? 1.Get Table Fie ...

  10. springMVC源码分析--@SessionAttribute用法及原理解析SessionAttributesHandler和SessionAttributeStore

    @SessionAttribute作用于处理器类上,用于在多个请求之间传递参数,类似于Session的Attribute,但不完全一样,一般来说@SessionAttribute设置的参数只用于暂时的 ...