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

当前位置 : 首页 > 网页制作 > CSS > 使用css制作三角,兼容IE6,用到的标签<div>

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

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

使用css来制作三角,在日常用得较多。恰好这几天项目中有用到,之前只是从网上copy下来代码直接用,但是今天在用的时候遇到一些问题,于是借此机会把这个css绘制三角好好研究下吧。
我们分别写一个<div>,<s>,<span>标签,并给上下左右四个border赋值不同的颜色,看看是什么样子:

[html] 
<div class="triangle"></div>     
    <p> 
        <s class="triangle"></s> 
        <span class="triangle"></span> 
    </p> 
css:
[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代码如下:
[css] 
.triangle { 
    height: 0; 
    width: 0; 
    border: 9px solid; 
    border-color: blue red green yellow; 
    font-size: 0; 

现在可以完美的兼容IE和chrome啦,FF也不在话下,哈哈。
好,现在我们再设置其中三个边框的颜色为透明的!看看会不会有三角出现哦,就以右边的三角为例吧。
修改css代码如下:
[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代码:
[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代码如下:
[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就可以兼容咯!
如果你要构造类似与1px的三角形:你可以将两个同方向的三角形叠加实现,只不过第二个三角形需要跟你的背景色的颜色一致。而且,两个三角形互相嵌套最好,里面的三角形通过绝对定位对外层的三角形进行覆盖,这样做比放两个同层级的三角形要好。好在哪里呢?如果你需要更换三角形位置的时候,你只需要改外层三角的位置就可以了,而里层的三角由于使用了相对定位而无须动刀哦。
如果您有什么见解请给我留言!

Tag:
网友评论

<