在西门大哥的博客中看到一篇文章:CSS实用小技巧,利用border属性实现一个标签做箭头,西门使用的是border,这里jucelin介绍另一种方法,用到的是一个特殊字符:◆。
演示:DEMO
代码:请狂击DEMO,然后右键,查看源代码(写得应该还算规范)。
主要用途:制作tips等。
实现原理:方法很简单,特殊字符◆就已经有了箭头的效果,那么用2个◆,用相对或绝对定位将他们完全重合,如果想做成向上的箭头,则再将下一层的◆向上移动1px。设置下颜色:下一层的使用的是下面内容部分的边框色,而上一层的◆使用的是内容部分的背景色,这样就出现一个想要的样式。
兼容性:用的position定位,兼容性你懂的(DEMO中未测试,用于生产需自测)。
比较下
西门大哥的方法并不好实现border同一色的问题,当然如果使用上面的方法也是可以实现的。
最后说明
如果一个页面中用了很多tips箭头,我仍然建议使用图片,减少浏览器的渲染时间,当然似乎要很多很多,才能看出浏览器有卡的效果。
相关资源
另一种实现小箭头的方法:CSS实用小技巧,利用border属性实现一个标签做箭头
这个使用了一个特殊符号,只能算是半CSS,可以用很简单的纯CSS的方法实现
哈哈,过来看一下,向你学习。
向你学习,你的模版真不错!
归档页面能参考下?求指导。
这个是WP的,而且模版不是俺弄的。不过JS部分,我倒略知一二。
不错,留个心。用到时过来取
飘过来学习的 哈哈 ~!
很有创造性的思路 😀 不错不错
惭愧惭愧,俺也是从别人那学来的。
还是border可靠吧
对,这个我也见过,什么时候找找
技术性很强的文章,来学习一下
巧妙. .mark下!
这个方法好巧妙。
嘿嘿。来学习了。申请友链哈。 😆
你这…也没见你加上我的啊
添加上了。呵呵。在折腾代码。给搞忘了。
路过,技术文.
刚好最近在学CSS,O(∩_∩)O哈哈~ 记录记录
一起学,我也是新手
这个不错,标记下
这个不错哦,很有用的
不错,这是腾讯微博采用的方法
我也是学来的,不过忘记在哪看到的了。太对不起那作者了,呵呵