使用css制作三角，兼容IE6，用到的标签<div><s><span>

使用css来制作三角，在日常用得较多。恰好这几天项目中有用到，之前只是从网上copy下来代码直接用，但是今天在用的时候遇到一些问题，于是借此机会把这个css绘制三角好好研究下吧。

我们分别写一个<div>,<s>,<span>标签，并给上下左右四个border赋值不同的颜色，看看是什么样子：

html：

<div class="triangle"></div>	
	<p>
		<s class="triangle"></s>
		<span class="triangle"></span>
	</p>

 

css：

.triangle {
	width: 20px;
	height: 20px;
	border: 9px solid;
	border-color: blue red green yellow;
}

在chrome下如图：

在IE下，div构成的三角中的内容区比chrome要小。

如果，我们把四个方向border的任意一边保留，其余三个边的颜色设置成透明，同时把设置height:0,width:0，这样我们就能得到一个三角形咯，我们先把所有边的颜色都保留，看是什么样子的。

我们发现，div这种块级元素，在chrome下面可以完美的表现出4个三角，但是IE下只能表现出上下的三角。其次，内联元素表现出的样式，在IE和chrome下面是一样的。于是，这样就可能会出现一个问题。就是在写三角的时候，我们写上下三角的时候，在IE和chrome下面，块级元素和内联元素都能展示出三角。但是你如果按照这种代码去写左右方向的三角的话，在chrome下ok，但是IE下面就会显示出体形来。这就会出现问题咯。这个问题也困扰了我，当时我也想，怎么同样的代码，出来的三角就不一样呢？原来方向不同，在IE下的表现也不一样。好，现在，我们来让梯形变成三角形。只需要加上一段代码：font-size:0，就可以啦

修改css代码如下：

.triangle {
	height: 0;
	width: 0;
	border: 9px solid;
	border-color: blue red green yellow;
	font-size: 0;
}

现在可以完美的兼容IE和chrome啦，FF也不在话下，哈哈。

好，现在我们再设置其中三个边框的颜色为透明的！看看会不会有三角出现哦，就以右边的三角为例吧。

修改css代码如下：

.triangle {
	height: 0;
	width: 0;
	border: 9px solid;
	border-color: transparent red transparent transparent;
	font-size: 0;
}

最终，IE7/8/9和chrome下面都ok，只是IE6下面不支持transparent，而使用默认的背景色黑色，如图所示：

 

IE6下面如此的丑陋，当然得解决掉，你可以使用如下的方法：

1. css hack

针对IE6的hack，给上，左，下的三个border设置为白色，但是这个情况只适用于背景色也为白色的情况

相应css代码：

.triangle {
	height: 0;
	width: 0;
	border: 9px solid;
	border-color: transparent red transparent transparent;
	font-size: 0;
	_border-top-color: white;
        _border-left-color: white;
        _border-bottom-color: white;
}

2. border-style

这个方法更好，设置要显示一边的三角border-style:solid，其他三边为border-style:dashed，这样利用虚线样式的border可以形成天然无污染的空白，多好！修改css代码如下：

.triangle {
	height: 0;
	width: 0;
	border-width: 9px ;
	border-style: dashed solid dashed dashed; 
	border-color: transparent red transparent transparent;
	font-size: 0;
}

这样IE6就可以兼容咯！

 

参考资料：

css border三角，圆角生成技术简介

利用css制作小三角