CSS實現三角兼容ie6

示例1

 

#test4 {
    height:0;
    width:0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color:#FF9600 transparent transparent transparent;
    border-style:solid dashed dashed dashed;
    border-width:20px;
}

 IE6下不支持透明 設置餘下三條邊的border-style爲dashed 便可達到透明的效果

 

示例2

 

CSS代碼：

.test{width:300px; padding:30px 20px; margin-left:60px; background:#beceeb; 
position:relative;}
.test span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.test span.bot{
    border-width:20px; 
    border-style:solid; 
    border-color:#ffffff #beceeb #beceeb #ffffff; 
    left:-40px; 
    top:40px;
}
.test span.top{
    border-width:10px 20px; 
    border-style:dashed solid solid dashed; 
    border-color:transparent #ffffff #ffffff transparent; 
    left:-40px; 
    top:60px;
}

HTML代碼：

<div class="test">
    <span class="bot"></span>
    <span class="top"></span>
    CSS 「邊框法」實現氣泡對話框效果一
</div>

 

示例3

CSS代碼：

.test{width:300px; padding:30px 20px; border:5px solid #beceeb; position:relative;}
.test span{width:0; height:0; font-size:0; overflow:hidden; position:absolute;}
.test span.bot{
    border-width:20px; 
    border-style:solid dashed dashed; 
    border-color:#beceeb transparent transparent; 
    left:80px; 
    bottom:-40px;
}
.test span.top{
    border-width:20px; 
    border-style:solid dashed dashed; 
    border-color:#ffffff transparent transparent; 
    left:80px; 
    bottom:-33px;
}

HTML代碼：

<div class="test">
    <span class="bot"></span>
    <span class="top"></span>
    CSS 「邊框法」實現氣泡對話框效果二
</div>