边框颜色和边框左宽度即答案

【问题标题】：border-color and border-left-width ie边框颜色和边框左宽度即
【发布时间】：2014-03-09 03:53:59
【问题描述】：

我正在尝试为“diagonal border”编写代码。
如果我在 IE 中使用border-color:transparent，它不起作用，但如果我使用border-color:#000000，它工作正常。
在其他浏览器（chrome、firefox it）中有效

我必须为我的网站使用透明，并且在此链接中有一个示例 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。我需要 ie 10 和 ie 11 的解决方案，但如果它也适用于 ie9 那就更好了

【问题讨论】：

你需要什么版本的IE？如果是 IE9 或更高版本，也许您可以尝试 rgba(0,0,0,0)。
我只有IE10和IE11..而且rgba(0,0,0,0)不行。
您应该更新您的问题，指定您需要使用解决方案的 IE 版本
我需要 ie 10 和 ie 11 的解决方案，但如果它也适用于 ie9 那就更好了。

标签： css internet-explorer border

【解决方案1】：

使用 alpha 通道：

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

“a”或 alpha 是一个 0-1 值，表示不透明度（0 表示透明，1 表示完全不透明）。

希望这会有所帮助！

【讨论】：