Diagonal line inside div auto

HTML

<div id="rectangle" class="rectangle">
    <div  id="diagonal"  class="diagonal"></div>
</div>

CSS

.rectangle
{   
    width: 300px;
    height: 100px;
    background-color: yellow;
    
}

.diagonal
{

    height: 1px;
    background-color: black;
    transform-origin: 0% 0%;
       
}

JavaScript

var e =  document.getElementById('rectangle'); 
var line =  document.getElementById('diagonal'); 

//alert(e.id);


var w= e.offsetWidth;//width
var h = e.offsetHeight;//height
var diagonalWidth = function(w, h){
return Math.sqrt(Math.pow(h,2) + Math.pow(w,2))
}
//var angle = Math.asin(h/Math.sqrt(Math.pow(h,2) + Math.pow(w,2)))
var angle =  (180 / Math.PI) *  Math.asin(h/diagonalWidth(w, h));
line.style.width = diagonalWidth(w, h) + 'px';


//$('line').css(newCss)
//$('#line').rotate({angle:20})
 var rotateCSS = 'rotate(' + angle + 'deg)';
     $('#diagonal').css({
      rotateCSS,
      '-webkit-transform': rotateCSS
    });