CSSのCalcは直線勾配でIE11に

Question

*{ 
 
    margin:0; padding: 0; 
 
} 
 
body { 
 
background-color: orangered; 
 
} 
 
.content { 
 
    margin-top: 200px; 
 
    height: 100vh; 
 
    background-color: #fdfdff; 
 
} 
 
.tilt { 
 
    position: relative; 
 
} 
 
.tilt:before { 
 
    content: ''; 
 
    padding-top: 8.74887%; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 100%; 
 
    background-image: linear-gradient(5deg, #fdfdff calc(50% - 1px), transparent 50%); 
 
}

<div class="content tilt"> 
 

 
</div>

を働いていないことは、IE11がCALC（）CSSプロパティをunderstantingいくつかの問題を抱えているようです。

私はこのように直線的勾配でCALCを使用しています：

background-image: linear-gradient(5deg, #fdfdff calc(50% - 1px), transparent 50%); 

しかし、私はこのようにそれを使用する場合：

background-image: linear-gradient(5deg, #fdfdff, transparent 50%); 

それは問題なく動作します。

私が理解できないことがもう1つあります。私はIE11でそのプロパティを調べるとき、それをオフに戻って、それが動作します。

calc（50％ - 1px）を使用する全体のポイントは、その角度がより滑らかに見えることです。

提案がありますか？

Answer 1

解決策が見つかりました。私のSASSのミックスインで 私が追加しました：私がしたかったよう

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { background: linear-gradient($angle, $color 50%, transparent 50%); } 

は、今では動作します。