Диагональная линия в css. Как?

.diagonal-line { 
  background-color: #000; 
  background-image: linear-gradient(to bottom right, transparent 45%, #fff, transparent 54%); 
  background-repeat: no-repeat; 
  font-size: 50px; 
  text-align: center; 
  color: #ffff00; 
}

<div class="diagonal-line">linear-gradient</div>

html, 
body { 
  padding: 0; 
  margin: 0; 
  width: 100%; 
  height: 100%; 
} 
 
* { 
  box-sizing: border-box; 
} 
 
.box { 
  position: relative; 
  max-width: 300px; 
  width: 100%; 
  margin: 3rem auto; 
   
  transition: all .2s; 
} 
 
.box img { 
  display: block; 
  max-width: 100%; 
  width: 100%; 
} 
 
/* Диагональ */ 
.box:after { 
  content: ''; 
  position: absolute; 
  left: 0; 
  top:0; 
  right: 0;   
  bottom: 0; 
  width: 100%; 
  height: 100%; 
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><line x1="0" y1="100%" x2="100%" y2="0" stroke="#fff" stroke-width="2"/></svg>'); 
  -webkit-background-size: cover; 
  background-size: cover; 
} 
 
 
/* Пример с изменением размеров блока с диагональю */ 
.box:hover { 
  transform: scale(1.5); 
}

<div class="box"> 
  <img src="https://images.unsplash.com/photo-1520112341255-f0659ca8db5f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=46514ba8b182c06c1d4c732ad829bc6b&auto=format&fit=crop&w=500&q=60" alt="">   
</div> 
   
<div class="box"> 
  <img src="https://images.unsplash.com/photo-1520100021416-5e0301d08ac3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=54c4a341abe652d9f674834b3dd75597&auto=format&fit=crop&w=500&q=60" alt="">   
</div>

var a = $('.wrapper').height(); //получаем высоту прямоугольника 
var b = $('.wrapper').width(); // ...и его ширину 
 
var d = Math.sqrt(a*a+b*b); //высчитываем диагональ 
 
var sin = a/d; //...синус угла между диагональню и стороной 
 
var deg = Math.asin(sin) * (180/Math.PI); //...угол 
 
 $('.inner').css({ 
    'width': d, //задаём длину диагонали 
    'transform': 'rotate('+deg+'deg)' //...и угол наклона при первой загрузке страницы 
  }); 
 
$(window).resize(function() { //меняем параметры при изменении размеров экрана 
 
  b = $('.wrapper').width(); 
 
  d = Math.sqrt(a*a+b*b); 
 
  sin = a/d; 
 
  deg = Math.asin(sin) * (180/Math.PI); 
 
 
  $('.inner').css({ 
    'width': d, 
    'transform': 'rotate('+deg+'deg)' 
  }); 
 
});

.wrapper { 
  height: 200px; 
  border: 1px solid black; 
} 
 
.inner { 
  border-top: 1px solid red; 
  transform-origin: 0 0; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="wrapper"> 
<div class="inner"></div> 
</div>

function myDeg() { 
  h = $("div").height(); 
  w = $("div").outerWidth(); 
  deg = Math.atan(h / w); 
  $("div").css("background", "linear-gradient(" + deg + "rad, mediumorchid calc(50% - 1px), white 50%,  mediumorchid calc(50% + 1px), mediumorchid 100% )"); 
} 
 
myDeg(); 
$(window).resize(function() { 
  myDeg(); 
});

div { 
  height: 200px; 
  background-color: mediumorchid; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div> 
 
</div>