Question

我正在尝试为“对角线边框”编写代码。
如果我在IE中使用border-color:transparent，它不起作用，但如果我使用border-color:#000000，它的工作正常。
在其他浏览器（chrome，firefox）工作

我必须对我的网站使用透明，在这个链接上有一个例子的 http://jsfiddle.net/K2EGY/5/

<style>
body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;  }
.init{
    position:relative;
    margin:auto;
    width:100%;
    height:130px;
    background-color:#ffffff;
}    
#triangle-bottomright {
    height: 0;
    width: 0;
    border-color: transparent #bccdd7  transparent;
    border-style: solid solid solid dashed;
    border-width: 0 0 250px 0px;    
}
#triangle-bottomright-2 {
    height: 0;
    width: 0;
    border-color: transparent #bccdd7  #000000;
    border-style: solid solid solid dashed;
    border-width: 0 0 250px 0;  
}
</style>

JS 和 HTML

<script type="text/javascript">
$(document).ready(function(){
    //DIV TRIANGOLARI
    $(window).on('resize', function(e){
        var w = $( window ).width();
        $('#triangle-bottomright').css('border-left-width', w+'px');
        $('#triangle-bottomright-2').css('border-left-width', w+'px');      
    })
    $(window).trigger( "resize" )   
})
</script>
</head>

<body>
    <div class="init"></div>
    <div id="triangle-bottomright"></div>
    <div class="init"></div>
    <div id="triangle-bottomright-2"></div>    
</body>

PS。我需要解决方案，即10和11，但如果它也适用于ie9它更好

Answer 1

使用Alpha通道：

border-color:rgba(0,0,0,0.0);

＆＃34; a＆＃34;或alpha，是一个0-1值，表示不透明度（0表示透明，1表示完全不透明）。

希望这有帮助！

border-color和border-left-width ie

1 个答案: