Home/ Questions/Q 6108203
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T14:16:17+00:00

My CSS looks as follows: .block1 { height:20px; width:70px; background-color:#09F; background-repeat:no-repeat; position:absolute; } This

  • 0

My CSS looks as follows:

.block1 {

 height:20px;
 width:70px;
 background-color:#09F;
 background-repeat:no-repeat;
 position:absolute;

}

This draws a rectangle. Next i would like to draw a rectangle on an angle, such as at 45 degrees. I am not aware of an angle option, how could i do this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s not fully supported in all browsers, but you can use CSS Rotation. Here’s an article on it.

    Basically, apply:

    -moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* WebKit (Chrome, Safari) */
-o-transform: rotate(45deg); /* Opera */
-ms-transform:rotate(45deg); /* IE9 */
transform: rotate(45deg); /* No support currently, but hooray future! */

/* Fun IE code (you should probably put this in a separate css file controlled with conditional comments) */
/* IE8+ - must be on one line, unfortunately */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";  
/* IE6 and 7 */ 
filter: progid:DXImageTransform.Microsoft.Matrix(
         M11=0.7071067811865474,
         M12=-0.7071067811865477,
         M21=0.7071067811865477,
         M22=0.7071067811865474,
         SizingMethod='auto expand');
/* These are necessary for the IE code only */
margin-left: 5px; 
margin-top: -70px;

    IE code generated with this tool, which is incredibly useful.

    • 0