最近在项目中用到了很多的小tips，之前都是随便找一套UI控件拿过来用一下就算完事了，一直也没有去管这个东西究竟是怎么搞出来的，只是大概知道这个东西怎么实现的，但是一套UI毕竟是太大了，tips也就是那些UI的一些附属品，没必要这么兴师动众，而且想想这些小玩意也都上样式上的事情，就决定自己就地解决一个算了，很自然的就引出了今天这篇文章。。。
主要的tips就长如下图这德行，就是个demo，所以比较丑。。
今天的主题就是这个小小的tips，但是还是有点文章可以做的，我主要介绍三种方法，可能还有更多的方法，但是在短时间内只能琢磨出以下三种方法：
第一种： 借助图片
这种方法估计是大家常用的方法，下面的小三角大家第一想法应该就是图片了，原理很简单，html的代码就是大概如下这种结构
div是tips的容器，span是放tips小嘴的图片的，给span设置一个小嘴背景就行啦，css代码如下所示：
这个是tips的小嘴的图片（./tips.png）： （额。。。没截好，凑合着用吧，以学习为主）
这种方法的优点就是：简单，好理解，一学就会。首先对容器元素进行position的相对定位，是为了tips的小嘴的绝对定位能找到基准的父元素，然后就是span的绝对定位是为了任意的放小嘴的位置，用top和left来控制。
第二种：借助于CSS的border特性
这个技能相对于使用图片的比较灵活，图片是一个非常令人讨厌的东西，需要多一次http请求，熟悉网页性能优化的朋友应该对图片都是非常敬而远之的，能不用就不用，而且用图片的话，想换一个大点的或者小点的tips小嘴相对比较复杂，好了，不说废话，介绍第二种方法的原理：
CSS的border蕴藏着一个牛叉的技能就是画三角形，具体的原理可以参考http://blog.sina.com.cn/s/blog_74d6cedd0100z0os.html，这位仁兄讲的还是比较到位的，既然能用css画三角形，那么为什么不画一个直接替换掉tips小嘴的图片呢？？好了，上代码，此方法的html结构如下图所示：
这次为什么有两个span呢？因为我们要画的是一个带border的三角形，类似于空心三角形，有canvas画图经验的朋友都知道空心的东东得这么画的，所以我们用tips-out来表示外面的border的灰色三角形，tips-in来表示里面的黄色的三角形，具体的样式代码如下图所示：
这个里面就是画出了两个三角形了，我们是借助于两个三角形的top定位的不同错开了1px，形成了一个border的视觉效果～
第三种：借助特殊符号
unicode编码支持很多特殊的符号，这些特殊符号是前端开发一笔宝贵的财富，因为这些符号就是一张张现成的图片，但是却不发起一次http请求，这种东西不用的话，还有天理吗？？我们今天做这个小tips的话需要借助于这么一个特殊符号：▼
这就是一个三角形啊。。好了列出html代码：
和借助border特性一样，需要两个三角形画出一个带border的三角形，这样的话，其实要控制tips小嘴的大小和颜色，我们其实只要控制这两个span的font-size和color，好了，我们接着看css代码，其实现在也是大同小异了：
这段css也是通过postion:absolute; top和left的值来控制两个三角形的位置达到形成tips的小嘴的视觉效果。
好了，tips其实还是很有意思的，我个人比较喜欢第三种方法，首先CSS很短也不是很难理解，并且没有用到图片，而在常规的项目开发中我也会想方设法的去尽可能的利用这些强大的特殊符号，能不用图片就不用图片。当然，也许tips的做法还有很多，我这里权当算是一个抛砖引玉吧。
转载于:https://www.cnblogs.com/jhonson/p/3376928.html