纯css实现三角形方法兼容ie6

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-08-30 11:10:04　-　阅:　-　评:1　-　积分:0

细心的朋友在浏览本站带源码的文章时会发现源码右上角有一个小三角形图标，
纯css实现三角形方法兼容ie6
也许你会说这是在ps里面处理好的一个图标，但实际上却不是图片哦，是正宗的三角形。请看下面这张图：
css画三角形
是不是觉得很神奇呢？你在猜想什么，不要怀疑这是用css样式实现的，也不要猜想是css3属性，其实在css2里面就已经可以实现了。核心源码如下：

div{width:0;height:0;margin:10px 10px 0 0;border-width:100px;
border-color:#00f transparent transparent transparent;border-style:solid dashed dashed dashed;}

来看看Chrome及其它浏览器下显示的效果图：
纯css实现三角形方法兼容ie6
怎么样，三角形出来了吧，再来看看让人吐血的ie6

,你惊呆了吗？反正我是惊呆了。纳尼，transparent在ie6下竟然失效了！如何解决呢，可以通过修改边框样式属性，将原来的border-style:solid;修改成border-style:solid dashed dotted dashed;再来看看ie6
纯css实现三角形方法兼容ie6
,怎么样，正常了吧,回过头来分析下源码是如何来实现的。4个边框只让显示的那个边框显示颜色，其它的透明，这样其它三边就不会显示了，四个边框的样式分别为：实线、虚线、点状、虚线，你会发现，除了实线外的虚线以及点状都是可以在ie6下达到预期效果的。（也许讲到这里时你会想到用网页背景色来替代透明色，但这种方法势必会很麻烦，不同的网站背景色不同，用此法必然要修改其它三块的颜色，这样显得更加麻烦些，索性直接用透明替代，这样在显示三角形的同时也能显示网页背景色，实乃上上策！）对于解决了ie6下的这个bug的你激动了吧，三角形什么的小case！先别激动哈，让我再来给你找出让人吐血的ie6中的一个bug出来，让你再次惊呆！源码如下:

div{width:0;height:0;margin:10px 10px 0 0;border-width:100px;
border-color:#00f #0F0 transparent transparent;border-style: solid solid dashed dashed;}

经过说明后，相信你看到上面这行代码后会轻松的说出显示的是效果C。对，没错，再来看看ie下的效果。
纯css实现三角形方法兼容ie6
正如图中红字所示，你会发现多出一块高度来，这是因为ie6下默认行高造成的。此时添加line-height:0即可。下面附上效果图ABCD完整的源码:

在线演示<!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>纯css实现三角形方法兼容ie6</title>
<meta name="author" content="艺灵设计,yilingsj@gmail.com, www.yilingsj.com" />
<style type="text/css">
*{
margin:0;
padding:0;
}
.wrap{
width:500px;
height:400px;
margin:0 auto;
padding-left:10px;
}
.wrap div{
width:0;
height:0;
line-height:0;
border-width:100px;
float:left;
margin:10px 10px 0 0;
}
.sjx4{
border-color:#00f #0F0 #F00 #CF0;
border-style:solid;
}
.sjx3{
border-color:#00f #0F0 #F00 transparent;
border-style:solid solid solid dashed;}
.sjx2{
border-color:#00f #0F0 transparent transparent;
border-style: solid solid dashed dashed;}
.sjx1{
border-color:#00f transparent transparent transparent;
border-style:solid dashed dotted dashed;}
</style>
</head>
<body>
<div class="wrap">
<div class="sjx4"></div>
<div class="sjx3"></div>
<div class="sjx2"></div>
<div class="sjx1"></div>
</div>
</body>
</html>

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

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