今天啄米鸟给我了一个冰剑的《em实现倒三角的提示效果》。仔细琢磨了一下运用的还是很巧妙的,在现实的前端开发中也很有用,至少可以减小图片的字节。
先看看应用实例吧:
实现的原来就是:在一个宽高为0像素的块状元素中设置border属性,例如
在浏览器中的显示如图:
点击查看demo:http://www.css88.com/demo/border/border1.html
这样就有上下左右四个三角形了,再把除了要用的三角外的其他3个三角(border)颜色设置为背景色就ok了。
例如这样就能得到一个颜色为#CCC的向上的三角:
更多的实例请点击查看demo:http://www.css88.com/demo/border/border.html