CSS: rotate a hr and positioning

mumph

macrumors regular
Original poster
Apr 18, 2013
115
0
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
Code:
<div class="blank"><hr class="line_diagonal">
</div>
CSS
Code:
.line_diagonal {
    width:100%;
    top:-35px;
    left:-35px;
     transform:rotate(45deg);
     -o-transform:rotate(45deg);
     -moz-transform:rotate(45deg);
     -webkit-transform:rotate(45deg);}
 

Attachments


Mac21ND

macrumors 6502a
Jun 6, 2007
724
167
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

macrumors 6502
Apr 3, 2006
346
12
Beacon, NY
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

macrumors regular
Original poster
Apr 18, 2013
115
0
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

macrumors 6502
Oct 11, 2011
374
36
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
Code:
.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.