纯纯CSS实现箭头、气泡让提示功能具有三角形图标实现箭头、气泡让提示功能具有三角形图标
演示地址：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 {
资源评论
weixin_38538950
- 粉丝: 4
- 资源: 930
最新资源
- 带补偿和电力市场上升问题的二元平衡问题的精确求解方法 二元策略中的纳什均衡 GAMS源代码，代码按照高水平文章复现，保证正确 纳什均衡在游戏中与二元决策变量包括薪酬支付和激励相容约束的非合作博弈理论直
- 利用群稀疏性进行风险约束的微电网重构 matlab源代码，代码按照高水平文章复现，保证正确 针对现有的配电系统和微电网，在存在可再生发电和负载森林化错误的情况下，考虑系统重构任务 通过求解一个机会约
- this is a very very file
- （1）微电网能源管理系统基于粒子群优化算法的风力光伏储能风光储系统的实时能量管理 如图123 matlab源代码，代码按照高水平文章复现，保证正确 粒子群优化算法(PSO)，并将其应用于独立风力微型发
- python 操作涉及删除链表的第一个节点
- 西南科技大学数据挖掘实验1.zip
- 配电网潮流解的存在性与线性逼近 MATLAB源代码，代码按照高水平文章复现，保证正确 讨论了描述平衡配电网的非线性功率方程的显式近似解的推导问题 给出了潮流方程实际解存在的充分条件，并给出了PQ母线
- 西南科技大学数据挖掘实验2.zip
- 西门子PLC smart200伺服液压PID昆仑通态人机界面 包括整套SMART200 PLC程序，昆仑通态MCGS程序，东元伺服，外挂编码器高速输入，PLC用户库，液压PID控制，温度采集、压力采
- 西南科技大学数据挖掘实验3.zip
- 西南科技大学数据挖掘实验4.zip
- 台达触摸屏上位机 C#监控触摸屏软元件数据，MODBUS TCP协议 1，例子简单易懂，自己写的程序，程序有注解
- Halcon联合C#最新版本视觉开发框架，源码，采用仿visionpro拖拉流程形式，非常适合学习使用，摸索完成后可修改参考用于项目使用 我用的halcon版本为17 ，其它版本需要自行重新引用dl
- this is is is vey very file
- 信捷XDPLC系列5轴 6轴脉冲步进工程带屏 数据配方 运行信息实时监控 学习教程调试OK版
- 微网电压调节控制源代码，保证正确 通过控制分布式微网发电无功注入来调节配电网电压分布的问题 首先介绍了一类非常普遍的纯局部控制策略，并通过一个反例演示了这类策略中的所有策略都无法将电网驱动到可行电压
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
