CSS: rotate a hr and positioning

[mumph]

This is driving me nuts. I have, i would say, intermediate knowledge of HTML and CSS bordering on beginner. I'm trying to rotate a <hr> 45 degrees in a div 70px square and it simply wont work.

The line does indeed rotate by 45 degrees but the positioning within the div seems to not follow any set logic.

I want the points of the line to start at the top left and end in the bottom right. Can some one please explain the css needed for that. The seemingly weird top and left values in my code are from me messing around. This obvsiously(?) needs changing, but to what?

HTML

<div class="blank"><hr class="line_diagonal">
</div>

CSS

.line_diagonal {
    width:100%;
    top:-35px;
    left:-35px;
     transform:rotate(45deg);
     -o-transform:rotate(45deg);
     -moz-transform:rotate(45deg);
     -webkit-transform:rotate(45deg);}

 

[Mac21ND]

It's rotating off the horizontal center of the hr line, which is aligned with the top of the div. In other words, if hr was at 0 degrees (not rotated), it would be aligned horizontally with the very top of the div.

I believe you'll need to move the hr line down within the div os that the horizontal center is closer to the actual center of the div (rectangle).

A simple test would be to add <br><br> (etc) before the hr and see what happens. That's probably not the best way to code what you want to do, but it'll confirm if I mentioned above is happening.

 

[jsm4182]

The css rotates the element around its center point. You were right to use a top and left value, but they won't do anything unless the hr has a position value of absolute of relative. The width: 100% also isn't going to work for you, the width is going to be calculated as the width of the containing div, and as we learned in geometry the length of the diagonal is longer than the width. The only way this would work is for the containing div to have a set height and width and calculate the proper width for the hr.

 

[mumph]

Thanks guys. I think that makes sense hhehe. Just to confirm though, the hr needs an absolute position and the containing div needs to be relative?

The width(length) of the line is not a problem I can just use 'overflow: hidden'

 

[olup]

yeah you set the containing element to position relative and use position absolute to align the line where you want it.

So it would be

.blank {position:relative;} .line_diagonal {position:absolute; top:20px; left:0;-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);}

Replace the absolute positioning values with whatever values you want to set the diagonal line to.