Линейный градиент или calc () не работают в IE11

Question

У меня проблема с линейным градиентом, IE11 и, возможно, функцией calc ().

Этот фрагмент кода действует по-разному в Chrome и IE11.

background: linear-gradient(to top right, transparent calc(50% - 1px), #ccc, transparent calc(50% + 1px));

Chrome
IE11

Я хочу, чтобы это выглядело как версия Chrome.
У кого-нибудь есть решение?

Answer 1

Вот еще одна идея, когда вам не нужно знать размер div, но у вас не будет прозрачности:

.box {
  background:
    linear-gradient(to top   right,transparent 49.8%,#fff 50%) top    -1px right -1px,
    linear-gradient(to bottom left,transparent 49.8%,#fff 50%) bottom -1px left  -1px,
    #ccc;
  background-size:100% 100%;
  background-repeat:no-repeat;

/* irrelevant styles */
  width:150px;
  height:150px;
  display:inline-block;
  vertical-align:top;
  border:1px solid;
}

<div class="box">
</div>

<div class="box" style="width:200px">
</div>
<div class="box" style="height:200px">
</div>

Аналогичный вопрос с другими идеями: изменение границы линейного градиента

Answer 2

Я нашел проблему.IE11 не нравится функция calc ().Я использовал вместо calc(50% - 1px) и calc(50% + 1px) абсолютные значения, которые составляли половину размера div + -1.