原文地址: CSS Triangles

演示地址：CSS Triangles Demo

原文日期: 2013年8月5日

翻译日期: 2013年8月9日

  1. 本文两种实现方式: 使用或不使用 before 和 :after 伪元素(伪类,pseudo-elements)

最近重新设计了我的网站，准备添加tooltips提示信息效果.实现很容易，但我想要让提示功能具有三角形的指示图标。

当我重新思考想要所设计的每个图标颜色都随心所欲的时候，采用图片那就是一场灾难。

幸运的是, MooTools 的核心开发者 Darren Waddell介绍了一个强大的技巧给我：CSS三角形.只使用纯CSS语言，你就能创建兼容各个浏览器的三角形，用很少的代码。

最终效果如下图所示:

效果图

不使用伪类的 CSS 代码如下:

  1. /* 向上的箭头,类似于A,只有三个边，不能指定上边框 */
  2. div.arrow-up {
  3. 	width: 0;
  4. 	height: 0;
  5. 	border-left: 5px solid transparent;  /* 左边框的宽 */
  6. 	border-right: 5px solid transparent; /* 右边框的宽 */
  7. 	border-bottom: 5px solid #2f2f2f; /* 下边框的长度|高,以及背景色 */
  8. 	font-size: 0;
  9. 	line-height: 0;
  10. }
  11.  
  12. /* 向下的箭头 类似于 V */
  13. div.arrow-down {
  14. 	width: 0;
  15. 	height: 0;
  16. 	border-left: 20px solid transparent;
  17. 	border-right: 20px solid transparent;
  18. 	border-top: 20px solid #f00;
  19. 	font-size: 0;
  20. 	line-height: 0;
  21. }
  22.  
  23. /* 向左的箭头: 只有三个边：上、下、右。而 <| 总体来看，向左三角形的高=上+下边框的长度。 宽=右边框的长度 */
  24. div.arrow-left {
  25. 	width: 0;
  26. 	height: 0;
  27. 	border-bottom: 15px solid transparent;  /* 下边框的高 */
  28. 	border-top: 15px solid transparent; /* 上方边框的高 */
  29. 	border-right: 10px solid yellow; /* 右边框的长度|宽度，以及背景色 */
  30. 	font-size: 0;
  31. 	line-height: 0;
  32. }
  33.  
  34. /* 向右的箭头: 只有三个边：上、下、左。而 |> 总体来看，向右三角形的高=上+下边框的长度。 宽=左边框的长度 */
  35. div.arrow-right {
  36. 	width: 0;
  37. 	height: 0;
  38. 	border-bottom: 15px solid transparent;  /* 下边框的高 */
  39. 	border-top: 15px solid transparent; /* 上方边框的高 */
  40. 	border-left: 60px solid green; /* 左边框的长度|宽度，以及背景色 */
  41. 	font-size: 0;
  42. 	line-height: 0;
  43. }

其中的秘密，就是这些三角形在你要指向的方向垂直的两边, 有巨大的边框,而让背面的边框设置为你喜欢的颜色即可。

边框越大，三角形就越大。调整三个边框的长度，就可以构建出各种不同的三角形。如果加上旋转，不知道似的否可以指定各种不同方向的图形?

当然，这个处理方法优越的地方就在于代码量非常少，同时非常灵活。



带有 :before 和 :after 的CSS三角形

前面的例子可以很好的工作，但是如果你想要不只是一个三角形怎么办？比如气泡对话框，那么可以使用伪类来实现CSS三角形箭头，对于弹出的提示信息来说非常完美，代码如下：

  1. div.tooltip {
  2. 	/* tooltip content styling in here; nothing to do with arrows */
  3. }
  4.  
  5. /* shared with before and after */
  6. div.tooltip:before, div.tooltip:after {
  7. 	content: ' ';
  8. 	height: 0;
  9. 	position: absolute;
  10. 	width: 0;
  11. 	border: 10px solid transparent; /* arrow size */
  12. }
  13.  
  14. /* 向上的箭头 */
  15. /* top-stacked, smaller arrow */
  16. div.tooltip:before {
  17. 	border-bottom-color: #fff;  /* arrow color */
  18.  
  19. 	/* positioning */
  20. 	position: absolute;
  21. 	top: -19px;
  22. 	left: 255px;
  23. 	z-index: 2;
  24. }
  25.  
  26. /* arrow which acts as a background shadow */
  27. div.tooltip:after {
  28. 	border-bottom-color: #333;  /* arrow color */
  29.  
  30. 	/* positioning */
  31. 	position: absolute;
  32. 	top: -24px;
  33. 	left: 255px;
  34. 	z-index: 1;
  35. }

一般来说在箭头的背面边框指定颜色，也可以只使用 :before 或者 :after 之中的一个。而第二个箭头，可以被当作背景边框，或者作为第一个的阴影。

我想问自己为什么不早点知道这种技术。这个优雅的技巧肯定会让我在将来大大的提高制作tooltip元素的水平，同时也为我打开了一个广阔的视野。

完整的页面示例代码如下：

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr">
  3. <head>	<title>CSS 箭头Demo</title>
  4.  
  5. 	<style type="text/css">
  6. 		/* 向上的箭头,类似于A,只有三个边，不能指定上边框 */
  7. 		div.arrow-up {
  8. 			width: 0;
  9. 			height: 0;
  10. 			border-left: 5px solid transparent;  /* 左边框的宽 */
  11. 			border-right: 5px solid transparent; /* 右边框的宽 */
  12. 			border-bottom: 5px solid #2f2f2f; /* 下边框的长度|高,以及背景色 */
  13. 			font-size: 0;
  14. 			line-height: 0;
  15. 		}
  16.  
  17. 		/* 向下的箭头 类似于 V */
  18. 		div.arrow-down {
  19. 			width: 0;
  20. 			height: 0;
  21. 			border-left: 20px solid transparent;
  22. 			border-right: 20px solid transparent;
  23. 			border-top: 20px solid #f00;
  24. 			font-size: 0;
  25. 			line-height: 0;
  26. 		}
  27.  
  28. 		/* 向左的箭头: 只有三个边：上、下、右。而 <| 总体来看，向左三角形的高=上+下边框的长度。 宽=右边框的长度 */
  29. 		div.arrow-left {
  30. 			width: 0;
  31. 			height: 0;
  32. 			border-bottom: 15px solid transparent;  /* 下边框的高 */
  33. 			border-top: 15px solid transparent; /* 上方边框的高 */
  34. 			border-right: 10px solid yellow; /* 右边框的长度|宽度，以及背景色 */
  35. 			font-size: 0;
  36. 			line-height: 0;
  37. 		}
  38.  
  39. 		/* 向右的箭头: 只有三个边：上、下、左。而 |> 总体来看，向右三角形的高=上+下边框的长度。 宽=左边框的长度 */
  40. 		div.arrow-right {
  41. 			width: 0;
  42. 			height: 0;
  43. 			border-bottom: 15px solid transparent;  /* 下边框的高 */
  44. 			border-top: 15px solid transparent; /* 上方边框的高 */
  45. 			border-left: 60px solid green; /* 左边框的长度|宽度，以及背景色 */
  46. 			font-size: 0;
  47. 			line-height: 0;
  48. 		}
  49.  
  50. 		/* 基本样式 */
  51. 		.tip {
  52. 			background: #eee;
  53. 			border: 1px solid #ccc;
  54. 			margin-left: 30px;
  55. 			padding: 30px;
  56. 			border-radius: 8px;
  57. 			box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  58. 			position: relative;
  59. 			width: 200px;
  60. 		}
  61.  
  62. 		/* 箭头 - :before and :after, 一起组成了好看的气泡小箭头 */
  63. 		.tip:before {
  64. 			position: absolute;
  65. 			display: inline-block;
  66. 			border-top: 17px solid transparent;
  67. 			border-right: 17px solid #eee;
  68. 			border-bottom: 17px solid transparent;
  69. 			border-right-color: rgba(0, 0, 0, 0.2);
  70. 			left: -18px;
  71. 			top: 40px;
  72. 			content: '';
  73. 		}
  74.  
  75. 		/* 背景阴影*/
  76. 		.tip:after {
  77. 			position: absolute;
  78. 			display: inline-block;
  79. 			border-top: 16px solid transparent;
  80. 			border-right: 16px solid #eee;
  81. 			border-bottom: 16px solid transparent;
  82. 			left: -16px;
  83. 			top: 41px;
  84. 			content: '';
  85. 		}
  86. 	</style>
  87. </head>
  88. <body>
  89.  
  90. <div id="contentHolder">
  91. 	<h1>CSS 箭头Demo</h1>
  92. 	<p>以下代码.是极好的纯 CSS 箭头样式，不使用背景图!</p>
  93. 	<div id="position:relative;">
  94. 		<div class="arrow-up">向上的箭头</div>
  95. 		<br />
  96. 		<div class="arrow-down">向下的箭头</div>
  97. 		<br />
  98. 		<div class="arrow-left">向左的箭头</div>
  99. 		<br />
  100. 		<div class="arrow-right">向右的箭头</div>
  101. 	</div>
  102.  
  103. 	<h2>CSS 箭头气泡 ，使用 伪类(Pseudo-Element)</h2>
  104. 	<div style="position:relative;">
  105. 		<div class="tip">
  106. 			企业级开发首选技术是什么？JavaEE和.Net哪个技术更好？在JavaEE开发中主要用哪些框架？另外在移动大热的趋势下如何开发出一个成功的Android产品？
  107. 		</div>
  108. 		<br/>
  109. 		<div class="tip">
  110. 			向左的箭头: 只有三个边：上、下、右。而 < | 总体来看，向左三角形的高=上+下边框的长度。 宽=右边框的长度<br />
  111. 			向右的箭头: 只有三个边：上、下、左。而 |> 总体来看，向右三角形的高=上+下边框的长度。 宽=左边框的长度<br />
  112. 			向上的箭头,类似于A,只有三个边，不能指定上边框
  113. 		</div>
  114. 	</div>
  115. </div>
  116. </body>
  117. </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. Mysql--开篇&目录

    Mysql 现在是互联网公司中使用得非常广泛的数据库产品了,开源.免费.小巧.易用等诸多特性奠定了其夯实的基础.自己从事 JavaWeb 也有一段时间了,工作中也是用的 Mysql,也会涉及到分析.慢 ...

  2. linux 删除命令

    rm *    文件名rm -r */ 文件夹rm -rf * 文件夹或文件名 -r 代表文件夹之下的都删除掉 -f 代表暴力删除,无需确认直接删完

  3. Python中and(逻辑与)计算法则

    在程序设计中,and称为逻辑与运算,也称布尔运算:1.and是在布尔上下文中从左到右计算表达式的值:2.0.''.[].().{}.None.False在布尔上下文中为假:其它任何东西都为真:3.如果 ...

  4. PHP MySQL Order By 关键词

    ORDER BY 关键词用于对记录集中的数据进行排序. ORDER BY 关键词 ORDER BY 关键词用于对记录集中的数据进行排序. ORDER BY 关键词默认对记录进行升序排序. 如果你想降序 ...

  5. PHP 5 Date/Time 函数

    PHP Date/Time 简介 Date/Time 函数允许您从 PHP 脚本运行的服务器上获取日期和时间.您可以使用 Date/Time 函数通过不同的方式来格式化日期和时间. 注释:这些函数依赖 ...

  6. Docker 列出镜像

    使用 docker images 显示本地已有的镜像. $ sudo docker images REPOSITORY TAG IMAGE ID CREATED VIRTUAL SIZE ubuntu ...

  7. MySQL之sql文件的导入导出

    window下 1.导出整个数据库(无需登录mysql)mysqldump -u 用户名 -p 数据库名 > 导出的文件名mysqldump -u dbuser -p dbname > d ...

  8. BlockingQueue（阻塞队列）详解

    一. 前言 在新增的Concurrent包中,BlockingQueue很好的解决了多线程中,如何高效安全"传输"数据的问题.通过这些高效并且线程安全的队列类,为我们快速搭建高质量 ...

  9. Hive基本原理及环境搭建

    今天我主要是在折腾这个Hive,早上看了一下书,最开始有点凌乱,后面慢慢地发现,hive其实挺简单的,以我的理解就是和数据库有关的东西,那这样的话对我来说就容易多啦,因为我对sql语法应该是比较熟悉了 ...

  10. 求链表倒数第n个元素

    提示:设置一前一后两个指针,一个指针步长为1,另一个指针步长为n,当一个指针走到链表尾端时, 另一指针指向的元素即为链表倒数第n个元素. #include <stdio.h> #inclu ...