纯 css 写出 tips 的几种方法
最近在项目中用到了很多的小 tips,之前都是随便找一套 UI 控件拿过来用一下就算完事了,一直也没有去管这个东
西究竟是怎么搞出来的,只是大概知道这个东西怎么实现的,但是一套 UI 毕竟是太大了,tips 也就是那些 UI 的一
些附属品,没必要这么兴师动众,而且想想这些小玩意也都上样式上的事情,就决定自己就地解决一个算了,很自
然的就引出了今天这篇文章。。。
主要的 tips 就长如下图这德行,就是个 demo,所以比较丑。。
今天的主题就是这个小小的 tips,但是还是有点文章可以做的,我主要介绍三种方法,可能还有更多的方法,但是
在短时间内只能琢磨出以下三种方法:
第一种: 借助图片
这种方法估计是大家常用的方法,下面的小三角大家第一想法应该就是图片了,原理很简单,html 的代码就是大概
如下这种结构
div 是 tips 的容器,span 是放 tips 小嘴的图片的,给 span 设置一个小嘴背景就行啦,css 代码如下所示:
这个是 tips 的小嘴的图片(./tips.png): (额。。。没截好,凑合着用吧,以学习为主)
这种方法的优点就是:简单,好理解,一学就会。首先对容器元素进行 position 的相对定位,是为了 tips 的小嘴的
绝对定位能找到基准的父元素,然后就是 span 的绝对定位是为了任意的放小嘴的位置,用 top 和 left 来控制。
评论0