纯CSS箭头,气泡
原文地址: 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箭头,气泡的更多相关文章
- 纯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 ...
随机推荐
- 谈谈Python中的decorator装饰器,如何更优雅的重用代码
众所周知,Python本身有很多优雅的语法,让你能用一行代码写出其他语言很多行代码才能做的事情,比如: 最常用的迭代(eg: for i in range(1,10)), 列表生成式(eg: [ x* ...
- CSS之绝对定位
w3school定义: 绝对定位的元素的位置相对于最近的已定位祖先元素(这里的已定位指的是绝对定位或者相对定位),如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块. 对于定位的主要问题是要 ...
- PLSQL(1)
PLSQLl编程 plsql是Oracle在标准的sql语言上的扩展 特点:可以在数据库中定义变量,常量,还可以使用条件语句和判断语句以及异常等 P ...
- 关于一些基础的Java问题的解答(五)
21. 实现多线程的两种方法:Thread与Runable 在Java中实现多线程编程有以下几个方法: 1.继承Thread类,重写run方法 public class Test { public s ...
- java中的final和volatile详解
相比synchronized,final和volatile也是经常使用的关键字,下面聊一聊这两个关键字的使用和实现 1.使用 final使用: 修饰类表示该类为终态类,无法被继承 修饰方法表示该方法无 ...
- 文件一键上传、汉字转拼音、excel文件上传下载功能模块的实现
----------------------------------------------------------------------------------------------[版权申明: ...
- Java中常用缓存Cache机制的实现
缓存,就是将程序或系统经常要调用的对象存在内存中,一遍其使用时可以快速调用,不必再去创建新的重复的实例. 这样做可以减少系统开销,提高系统效率. 缓存主要可分为二大类: 一.通过文件缓存,顾名思义文件 ...
- hibernate5学习之理解数据库级并发
本文作者:苏生米沿 本文地址:http://blog.csdn.net/sushengmiyan/article/details/50551741 当我们谈起隔离的时候,我们总是假定两个物体直接要么隔 ...
- IntelliJ IDEA在Local模式下Spark程序消除日志中INFO输出
在使用Intellij IDEA,local模式下运行Spark程序时,会在Run窗口打印出很多INFO信息,辅助信息太多可能会将有用的信息掩盖掉.如下所示 要解决这个问题,主要是要正确设置好log4 ...
- 在做自动化测试之前你需要知道的,转自:http://www.cnblogs.com/fnng/p/3653793.html
什么是自动化测? 做测试好几年了,真正学习和实践自动化测试一年,自我感觉这一个年中收获许多.一直想动笔写一篇文章分享自动化测试实践中的一些经验.终于决定花点时间来做这件事儿. 首先理清自动化测试的概念 ...