Diagonal line inside div ORIGINAL

by greatCar

HTML

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

CSS

div.container
{   margin-left:100px;
   margin-top:50px;
    width: 300px;
    height: 300px;
    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: rotate(45deg);
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari and Chrome */
       transform-origin: 0% 0%;
}

JavaScript

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


//alert(e.id);


var w= e.offsetWidth;//width
var h = e.offsetHeight;//height
var angle = Math.asin(h/Math.sqrt(Math.pow(h,2) + Math.pow(w,2)))
alert(angle * (180 / Math.PI));