巧用边框构造立方体（完美兼容ie6）

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2014-06-30 09:40:08　-　阅:　-　评:0　-　积分:0

前几天在网上找到了一个更好的实现构造立方体的方法，效果图如下：

这个是蓝色上面的一个帖子（http://bbs.blueidea.com/thread-2854816-1-1.html），源出处应该是国外的大牛吧。这个帖子中的实现方法很简单，在斜边那里巧用边框来解决，这不得不让我想到很久前发表的《纯css实现三角形方法兼容ie6》一文，二者有异曲同工之妙！用边框这个的好处就是兼容天朝的低版本ie内核。说到这里可能有部分亲已经迫不及待的想看源码了，附源码：

html内容：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>巧用边框构造立方体（完美兼容ie6）--艺灵设计，qq群：231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com">
<meta name="keywords" content="巧用边框构造立方体,兼容ie6,ie6 bug,ie6下transparent失效,纯css实现3D立方体">
<style>
body{background:#fff;}
#abamboo{width:257px;margin:50px auto;}
#abamboo div{float:left;overflow:hidden;}
.testa{width:177px;height:0px;border-bottom:40px solid #eee;border-left:40px solid #fff;}
.testb{width:0;height:0;border-left:40px solid #eee;border-bottom:40px solid #bbb;}
.testc{width:217px;height:217px;background:#ccc;}
.testd{width:0;height:177px;border-left:40px solid #bbb;border-bottom:40px solid #fff;}
</style>
</head>
<body>
<div id="abamboo">
<div class="testa"></div>
<div class="testb"></div>
<div class="testc"></div>
<div class="testd"></div>
</div>
</body>
</html>

话又说回来，如果洒家将别处的文章复制到网站来重新发表一次，那也就没什么意义了。洒家不会像大多数网站那样死板复制，每发表一篇文章自然有其独特之处。好了，下面来曝上面代码的一个小bug。是什么bug呢？我们将网页的背景色换成其它颜色即可发现问题，如下图：

说到这里可能有部分亲已经不耐烦的说：“这都不是事，一个透明色搞定”。既然如此，那洒家来放一张设置了透明色在ie6下的效果图：

你是会忍不住脱口而出“坑爹”二字还是会说洒家把透明色写成了黑色么？如果亲是后者的话可以亲手测试下哦，上面放有源码的哈。好了，不卖关子了。至于ie6下透明色成了黑色，这个问题在《纯css实现三角形方法兼容ie6》一文中就有提及过，解决的方法就是：边框设置成“dashed”或“dotted”均可下面再附上完美兼容ie6后的源码：

html内容（完美兼容ie6）：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>巧用边框构造立方体（完美兼容ie6）--艺灵设计，qq群：231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com">
<meta name="keywords" content="巧用边框构造立方体,兼容ie6,ie6 bug,ie6下transparent失效,纯css实现3D立方体">
<style>
#abamboo{width:257px;margin:50px auto;}
#abamboo div{float:left;overflow:hidden;}
.testa{width:177px;height:0px;border-bottom:40px solid #eee;border-left:40px dashed transparent}
.testb{width:0;height:0;border-left:40px solid #eee;border-bottom:40px solid #bbb;}
.testc{width:217px;height:217px;background:#ccc;}
.testd{width:0;height:177px;border-left:40px solid #bbb;border-bottom:40px dotted transparent;}
</style>
</head>
<body style="background:#333">
<div id="abamboo">
<div class="testa"></div>
<div class="testb"></div>
<div class="testc"></div>
<div class="testd"></div>
</div>
</body>
</html>

下面再附上完美兼容ie6的源码在ie6下的效果图：

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/div/2014-06-30/168.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！