Rotating elements in CSS aka How to make diagonal line in 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.
-moz-transform:rotate(120deg); /* Firefox */ -webkit-transform:rotate(120deg); /* WebKit: Chrome/Safari */ -o-transform:rotate(120deg); /* Opera */ -ms-transform:rotate(120deg); /* IE9 */ filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand'); /* IE8 */
The result can look like this:
