Is it possible to draw a diagonal line using CSS3?
yes it is, there is more then one possibility:
You could use a hr
element or a other element and rotate it. Here is a demo:
And yes it works in IE to :)
http://jsfiddle.net/LqFAX/
-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;
Here is a complete example, you just need to play with an angle and translation base on your dimensions.
<div style="background-color: #BCBCBC; width: 100px; height: 50px; padding: 0; margin: 0">
<div style="width: 112px; height: 47px; border-bottom: 1px solid black; -webkit-transform: translateY(-20px) translateX(5px) rotate(27deg); "></div>
</div>
You can:
- create html element (div)
- set background color to transparent
- set color to one border
- rotate