Diagonal line inside div

HTML

<div id="container" class="container">
    <div  id="line"  class="line"></div>
</div>

CSS

div.container
{   margin-left:100px;
   margin-top:50px;
    width: 300px;
    height: 100px;
    background-color: #aaa;
    
}
div.test
{
    width: 423px;
    height: 1px;
    background-color: #000;
}
div.line
{
    position: relative;
    z-index: 1;
top:0px;
    width: 423px;
    height: 1px;
    background-color: #000;
 
       transform-origin: 0% 0%;
}

JavaScript

var e =  document.getElementById('container'); 
var line =  document.getElementById('line'); 

//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)';
     $('#line').css({
      '-moz-transform': rotateCSS,
      '-webkit-transform': rotateCSS
    });
 

alert(angle);