How to draw diagonal lines with pure CSS?
Another straight to the point solution
http://erezsh.wordpress.com/2008/07/31/drawing-diagonal-lines-with-css/If you want to make a diagonal line in CSS you can just draw a rectangle with height so small it's almost a line and then rotate it a bit. For example make a div and set it's width to 100px and height to 2px, then make it's background-color black.
To rotate an element in CSS you need to use below rules.
div, hr {
-moz-transform: rotate(7.5deg);
-o-transform: rotate(7.5deg);
-webkit-transform: rotate(7.5deg);
-ms-transform: rotate(7.5deg);
transform: rotate(7.5deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104,sizingMethod='auto expand')";
zoom: 1;
}
Comments