a few words about web development

How to draw diagonal lines with pure CSS?

Another straight to the point solution
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;