CSS显示三角符号等视觉模拟效果

最新推荐文章于 2024-09-24 13:18:04 发布

籽沫

最新推荐文章于 2024-09-24 13:18:04 发布

阅读量1.4k

点赞数

文章标签： css div xhtml safari 浏览器测试

本文链接：https://blog.csdn.net/nx8823520/article/details/5736987

版权

今天在帮别人解决一个问题的时候看到那个提示框第一反应还以为是图片做出来的，后来拿到代码仔细了的看了下才发现又是一个利用css模拟的效果：http://topic.csdn.net/u/20100714/13/8d77ae9d-1864-444e-9d33-2c3b6e7d280c.html?58629

而且这个用css模拟的三角形和用css模拟的圆角方法却一点都不同，虽然都是用视觉差所展示出来的不过前者的方法却很有意思（关于css模拟圆角效果，这个我在另外篇文章中详细的说明了的有兴趣的可以去看看http://blog.csdn.net/nx8823520/archive/2010/06/14/5670989.aspx ，然后在这个帖子里面就不说讲解了），前者它是用一个空的div然后定义样式展示出来的，可能没做过的人会和我看到的第一反应一样，一个空的div在没有内容的情况下默认是一个四四方方的块状级，如何能搭建出来三角形呢？

大家看看下面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页</title> </head> <body> <div style="border-bottom:7px solid #000;border-left:6px dashed #fff;border-right:6px dashed #fff;height:0;width:0;"></div> </body> </html>

然后新建个文件打开看看，怎么样？一个黑色的三角形就这么出来了，很神奇吧？而且css模拟的这样的图形可以随便的更改检讨方向箭头颜色，并且兼容IE6-8、FF、Opera等系列浏览器，不过唯一遗憾的就是在Safari，这些浏览器中是没法兼容的，嗯好了接下来说说它的工作原理吧。

在开始探讨前，我们先做个测试我们下个div不定义它的宽高，同事设置它的线条，为了我们查看明显，我们将线条宽度设置大点代码如下：

<div style="border-bottom:17px solid #000;border-left:16px solid red;border-right:16px solid blue;border-top:16px solid #606;margin:20px;" mce_style="border-bottom:17px solid #000;border-left:16px dashed red;border-right:16px dashed blue;border-top:16px solid #606;margin:20px;">测试块状边框</div>

然后保存运行发现表示情况如下：

仔细观察下，会发现它的表现形式在左右线条和上下线条见围城区域均是个斜切角，其实这就是边框线条表现的一种方式只不过我们平常的应用只会很少用到这么粗的线条或者不同的线条颜色所以基本都不知道这个特效，好了在这里我们知道了线条的表现方式也就是以切角的形式拼凑成的，那这样的话，我们在看看我们实现三角形的那个代码，在这个代码中我们将宽度和高度定义为了0，也就是这个div默认情况下是个空白元素不占据区域的，不过我们在同时却有定义了它的底线为7px，按照盒模型线条也是占据的，那这样的话这个盒模型也就出现了高7px的高度（因为底线是快7px那这7px的宽度也就相当于高了，可以我说的比较绕口，你自己测试下就会很清楚了），同理的那它的左右线条的宽度也就构建了这个盒模型的宽，然后因为它们独有的线条展现形式也就组建成了个三角形了，因为左右线条色是白色的的所以也就只能看到剩余的底线的黑色三角了！

然后我们按照我们的需要只需要改变底线的颜色那这个三角形颜色也就变化了同意的也可以利用线条的宽度去改吧块状的大小即三角符号的大小！

说到这里不知道你看懂了没有，就像前面几片文档我说的一样最重要的是自己实践，很多东西自己实践会了解的更对，最后大家可以根据这个线条的特性拓展拓展下，产生很多有意思的图标，比如漏斗、4色小方块等等……呵呵好了到这里该结束了css真的很强大很多东西我们仔细观察会发现它的更多用处！